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Foundation 5 简介 





Foundation 用 于 开发 响应 式 的 HTML, CSS and JavaScript 框架 。 
Foundation 是 一 个 易 用 、 强 大 而 且 有 灵活 的 框架 ,用 于 构建 基于 任何 设备 上 的 Web & 


o 


Foundation 是 一 个 以 移动 优先 的 流行 框架 。 


在 线 实例 
8 AAS FEA Foundation 实例 。 
你 可 以 直接 使 用 我 们 的 在 线 编辑 器 ， 并 点 击 "提交 运行 "按钮 查看 结果 : 


Foundation 实例 


Foundation 5 简介 6 


«div class="row"> 
«div class="medium-12 columns"> 
«div class="panel"> 
<hi>Foundation Page</h1i> 
<p>Resize this responsive page to see the effect!</p> 
<button type="button" class="button small">I Like It!</buttor 
</div> 
</div> 
</div> 


<div class="row"> 

<div class="medium-4 columns"> 
<h3>Column 1</h3> 
<p>Lorem ipsum. .</p> 

</div> 

<div class="medium-4 columns"> 
<h3>Column 2</h3> 
<p>Lorem ipsum. .</p> 

</div> 

<div class="medium-4 columns"> 
<h3>Column 3</h3> 
<p>Lorem ipsum. .</p> 

</div> 


</div> 


El 
点 击 "尝试 一 下 "按钮 查看 在 线 实例 。 





Foundation 特性 
以 下 效果 为 在 iframe 标签 中 的 演示 ， 可 以 点 击 "党 试 一 下 "查看 在 线 实例 : 
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表格 : 


Firstname 
John 
Mary 


July 


E Hem: 


Lastname 
Doe 
Moe 


Dooley 


Email 
john@example.com 
mary@example.com 


july@example.com 
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span span span span 
1 1 1 1 


span 4 


面板 : 


Gray Panel Blue Panel 


Panel Text Panel Text 


FAX: 


Dropdown Button ~ 


Link 1 
Link 2 


Link 3 


Accordion 1 
Demo 1 - Lorem ipsum dolor sit amet.... 
Accordion 2 


Accordion 3 


顶部 导航 : 


Home Sign Up Search 


模 态 框 : 
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模 态 框 标题 。 
Beck. 


模 态 框 文本 。 
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Foundation 起 步 


什么 是 Foundation ? 


e Foundation 是 一 个 免费 的 前 端 框 架 ， 用 于 快速 开发 。 

e Foundation 包含 了 HTML 和 CSS 的 设计 模板 ， 提 供 多 种 Web 上 的 UI 组 件 ， 
WRA., a, Tabs 等 等 。 同 时 也 提供 了 多 种 JavaScript 插件 。 

e Foundation 移动 优先 ， 可 创建 响应 式 网 页 。 

e Foundation 适用 于 初学 者 和 专业 人 士 。 

e Foundation 已 使 用 在 Facebook, eBay, Samsung, Amazon, Disney 等 。 
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什么 是 响应 式 网 页 设计 ? 
响应 式 Web 设 计 (Responsive Web design) 的 理念 是 : 页 面 的 设计 与 开发 应 当 


根据 用 户 行为 以 及 设备 环境 (系统 平台 、 屏 幕 尺寸 、 屏 幕 定向 等 ) 进 行 相应 的 响 
应 和 调整 。 


从 哪里 下 载 Foundation? 


你 可 以 通过 以 下 两 种 方式 来 获取 Foundation : 
1、 从 官网 下 载 最 新 版 本 : http://foundation.zurb.com/。 
2、 使 用 菜 乌 教程 官网 提供 的 CDN (推荐 ) 


<!-- css 文件 --> 
«link rel="stylesheet" href="http://static.runoob.com/assets/foundé 


Se ue gas 
<script src="http://static.runoob.com/assets/jquery/2.0.3/jquery.m: 


<!-- JavaScript 文件 --> 
«script srcz"http://static.runoob.com/assets/foundation-5.5.3/js/f« 


<!-- modernizr 文件 --» 
«script src="http://static.runoob.com/assets/foundation-5.5.3/js/ve 


本 站 静态 CDN 基于 阿里 云 服务 。 
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Foundation 使 用 CDN 的 优势 : 


Foundation 使 用 CDN 提高 了 企业 站 点 (尤其 含有 大 量 图 片 和 静态 页 面 站 点 ) 的 
访问 速度 ， 并 大 大 提高 以 上 性 质 站 点 的 稳定 性 


为 什么 使 用 modernizr? 


一 些 Foundation 的 组 件 使 用 了 上 比较 前 前 治 的 HTML5 和 CSS3 特性 ， 但 不 是 
所 有 浏览 器 都 支持 。 Modernizr 是 一 个 用 于 检测 用 户 浏览 器 HTML5 和 CSS3 特 
性 的 JavaScript 库 - 让 组 件 能 在 所 有 浏览 器 上 正常 运行 。 


使 用 Foundation 创建 页 面 


1. 添加 HTML5 doctype 


Foundation 使 用 HTML 元 素 和 CSS 属性 ， 所 以 需要 添加 HTML5 doctype 文档 类 
型 声明 。 


同时 我 们 可 以 设置 文档 的 语言 属性 lang 及 字符 编码 : 


«IDOCTYPE html» 
«html lang="zh-cn"> 
«head» 
«meta charset="utf-8"> 
«/head» 
«/html» 


2. Foundation 5 移动 优先 

Foundation 5 为 移动 设备 的 响应 式 设 计 。 框 架 的 核心 是 移动 优先 。 
为 了 确保 页 面 可 自由 缩放 可 以 在 &lt;head&gt; 元 素 中 添加 以 下 
&lt;meta&gt; 标签 : 


«meta name-"viewport" content="width=device-width, initial-scale-1' 
4| aT 


e width : 控制 viewport 的 大 小 ， 可 以 指定 的 一 个 值 ， 如 果 600， 或 者 特殊 的 
值 ， 如 device-width 为 设备 的 宽度 (单位 为 缩放 为 100% 时 的 CSS BUR 
素 ) 。 

e initial-scale : 初始 缩放 比例 ， 也 即 是 当 页 面 第 一 次 load 的 时 候 缩 放 上 比例 。 


3. 初始 化 组 件 


一 些 Foundation 组 件 是 基于 jQuery 开放 的 ， 如 : 模 态 框 、 下 拉 菜 单 等 。 你 可 以 使 
用 以 下 脚本 来 初始 化 组 件 : 





«script» 
$(document).ready(function() { 
$(document).foundation(); 


;) 


«/script» 


基本 Foundation 页 面 


如 何 创 建 一 个 基本 的 foundation 页 面 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Foundation Example</title> 
<meta charset="utf-8"> 
«meta name="viewport" content="width=device-width, initial-scale: 
<!-- css 文件 --> 
<link rel="stylesheet" href="http://static.runoob.com/assets/four 


<!-- jQuery Æ --> 
«script src="http://static.runoob.com/assets/jquery/2.0.3/jquery 


«!-- JavaScript 文件 --> 
«script src="http://static.runoob.com/assets/foundation-5.5.3/js, 


«!-- modernizr 文件 --» 

«script src="http://static.runoob.com/assets/foundation-5.5.3/js, 
«/head» 
«body» 


«div class="row"> 
«div class-"medium-12 columns" 
«div class="panel"> 
<hi>Foundation 页 面 </h1> 
<p> 重 置 窗口 大 小 ， 查 看 效果 ! </p> 
«button type="button" class="button small">I Like It!</buttor 
</div> 
</div> 
</div> 


<div class="row"> 
<div class="medium-4 columns"> 
<h3>Column 1</h3> 
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
</div> 
<div class="medium-4 columns"> 
<h3>Column 2</h3> 
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
</div> 
<div class="medium-4 columns"> 
<h3>Column 3</h3> 
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
</div> 
</div> 


</body> 
</html> 








Foundation 文本 


Foundation 默认 设置 


Foundation 使 用 浏览 器 默认 字体 大 小 ( font-size:100% )。 对 于 大 多 数 桌 面 浏 览 
器 来 说 ， 字 体 默 认为 16px。 对 于 大 多 数 移 动 端 浏览 器 来 说 ， 字 体 默 认为 12px。 默 
认 的 字体 为 "Helvetica Neue" , line-height 默认 为 1.5 。 


以 上 默认 的 设置 均 是 针对 &lt;body&gt; 元 素 。 


Foundation 文字 排列 设计 


本 章节 我 们 将 讨论 Foundation 的 文字 排列 设计 。 
以 下 实例 的 真实 样式 请 通过 点 击 "党 试 一 下 "按钮 查看 。 


<h1> - <h6> 


Foundation EPI HTML 标题 ( &lt;hl&gt; 到 &lt;h6&gt; ) 如 下 所 示 : 
实例 
头 


«hi»hi 标题 </h1> 
<h2>h2 标题 </h2> 
<h3>h3 标题 </h3> 
<h4>h4 标题 </h4> 
<h5>h5 标题 </h5> 
<h6>h6 标题 </h6> 


提示 : 如 果 需 要 创建 一 个 浅 色 的 标题 ， 可 以 在 元 素 上 添加 .subheader X: 
实例 


«hi class="subheader">h1.subheader</hi> 
<h2 class="subheader">h2.subheader</h2> 
<h3 class="subheader">h3.subheader</h3> 
«h4 class="subheader">h4.subheader</h4> 
<h5 class="subheader">h5.subheader</h5> 
«h6 class="sSubheader">h6.subheader</h6> 


«small» 


在 Foundation #, HTML &lt;small&gt; 元 素 用 于 创建 一 个 浅 色 的 副标题 : 
实例 
头 


<hi>hi heading <small>secondary text</small></h1> 
<h2>h2 heading <small>secondary text</small></h2> 
<h3>h3 heading <small>secondary text</small></h3> 
<h4>h4 heading <small>secondary text</small></h4> 
<h5>h5 heading <small>secondary text</small></h5> 
<h6>h6 heading <small>secondary text</small></h6> 


<a> 
Foundation &lt;a&gt; 元 素 的 样式 如 下 所 示 : 


实例 


<p> 这 是 一 个 «a class="a" href="#"> 链 接 </a>。</p> 


<abbr> 


Foundation &lt;abbr&gt; ”元素 的 样式 如 下 所 示 : 


实例 


<p>The «abbr title="World Health Organization">WHO</abbr> was founi 





«blockquote» 


Foundation &lt;blockquote&gt; 元 素 的 祥 式 如 下 所 示 : 


实例 


<blockquote> 
<p> 学 的 不 仅 是 技术 ， 更 是 梦想 ! </p> 
<cite> 菜 乌 教 程 </cite> 
</blockquote> 


«dl» 


Foundation &lt;dl&gt; 元 素 的 样式 如 下 所 示 : 


实例 
«dl» 
<dt>Coffee</dt> 
<dd>- black hot drink</dd> 
<dt>Milk</dt> 
<dd>- white cold drink</dd> 
</dl1> 
<code> 


Foundation &lt;code&gt; ”元素 的 样式 如 下 所 示 : 
实例 
头 


<p> 以 下 HTML 元 素 : <code>span</code>, <code>section</code>, # «code 


a 一 -一 





«kbd» 


Foundation &lt;kbd&gt; 元素 的 样式 如 下 所 示 : 
实例 
头 


<p> 按 下 «kbd»ctrl + p</kbd> 键 打开 打印 窗口 。</p> 


«hr» 


Foundation &lt;hr&gt; 元 素 的 样式 如 下 所 示 : 
实例 


<hr> 


Foundation 表格 
Foundation BY &lt;table&gt; ”元素 样 式 为 灰色 斑马 条 纹 且 包含 四 个 边框 : 


Firstname Lastname Email City Age Country 
John Doe john@example.com New York 35 USA 
Mary Moe mary@example.com Chicago 51 USA 


July Dooley july@example.com San Francisco 38 USA 


实例 


«table» 
«thead» 
«tr» 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>John</td> 
<td>Doe</td> 
<td>john@example.com</td> 
</tr> 
<tr> 
<td>Mary</td> 
<td>Moe</td> 
<td>mar y@example.com</td> 
</tr> 
<tr> 
<td>July</td> 
<td>Dooley</td> 
<td>july@example.com</td> 
</tr> 
</tbody> 
</table> 


响应 陈 表格 


使 用 CSS 让 表格 支持 响应 式 设计 : 在 表格 外 添加 &lt;div&gt; 元 素 ， 样 式 为 


overflow-x:hidden : 
实例 


«div style="overflow-x:hidden"> 
<table> 
</table> 

</div> 


Foundation 按钮 


按钮 样式 


Foundation 提供 了 6 种 按钮 样式 。 .button 类 创建 了 一 个 蓝 色 的 按钮 并 附 有 内 
边 距 。 不 同 颜色 按钮 类 为 : «secondary , ,success , .info , .warning 或 
.alert : 


实例 


«button type="button" class="button">Default</button> 

«button type="button" class="button secondary">Secondary</button> 
<button type="button" class="button success">Success</button> 
<button type="button" class="button info">Info</button> 

<button type="button" class="button warning">Warning</button> 
<button type="button" class="button alert">Alert</button> 


dmm SS eS ee ee ms] 


按钮 类 可 以 使 用 在 &lt;a&gt; , &lt;button&gt; , X &lt;input&gt; 元 素 : 
实例 
头 


«a href="#" class="button info" role="button">Link Button</a> 
<button type="button" class="button info">Button</button> 
<input type="button" class="button info" value="Input Button"> 
<input type="submit" class="button info" value="Submit Button"> 


q 


为 什么 将 a 标签 的 href 设置 为 #3 


当 我 们 不 希望 链接 点 击 跳 转 并 得 到 "404" nit, BNL a 标签 的 href 设 
iB 7 #。 


按钮 大 小 
我 们 可 以 使 用 .large , .small 或 .tiny 类 来 设置 按钮 大 小 : 


实例 


«button type="button" class="button large">Large</button> 
<button type="button" class="button">Default</button> 
«button type="button" class="button small">Small</button> 
<button type="button" class="button tiny">Tiny</button> 


[3] f8 FR 4H 


可 以 使 用 .radius 和 .round 类 来 设置 圆 角 按 钮 : 
实例 
头 


«button type="button" class="button">Default Button</button> 
<button type="button" class="button radius">Radius Button</button> 
<button type="button" class="button round">Round Button</button> 


LN uU 
延展 按钮 
可 以 使 用 .expand 类 来 设置 按钮 的 宽带 为 10096: 
实例 
«button type="button" class="button">Default Button</button> 
<button type="button" class="button expand">Expanded Button</buttor 


E ES 


RHAH 


可 以 使 用 .disabled 类 来 设置 按钮 不 可 点 击 : 





实例 


«button type="button" class="button">Default Button</button> 
«button type="button" class="button disabled">Disabled Button</butt 


sy 





Foundation 按钮 组 


按钮 组 


Foundation 可 以 在 同一 行内 创建 一 系列 的 按钮 。 
可 以 使 用 &lt;ul&gt; 元 素 并 添加 .button-group 类 来 创建 按钮 组 : 


实例 


«ul class="button-group"> 
<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 
<li><button type="button" class="button">Sony</button></1i> 
</ul> 


垂直 按钮 组 


垂直 按钮 组 使 用 stack 类 来 创建 。 注 意 ， 按 钮 会 跨越 父 元 素 的 整个 宽度 : 
实例 


«ul class-"button-group stack"> 
<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</but ton></1i> 
<li><button type="button" class="button">Sony</button></1i> 
</ul> 


.stack-for-small AF RUGS, TRA AKEHE Y AEAEE]: 
实例 


«ul class-"button-group stack-for-small"> 
<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 
<li><button type="button" class="button">Sony</button></1i> 
</ul> 


[3] £8 T£ 4n 28. 


按钮 组 中 使 用 .radius 和 .round 类 为 按钮 添加 圆 角 效果 : 
实例 


«ul class="button-group radius"> 
<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 
<li><button type="button" class="button">Sony</button></1i> 
</ul> 


<ul class="button-group round"> 
<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 


<li><button type="button" class="button">Sony</button></1i> 
</ul> 


均匀 延展 按钮 组 


.even-num 类 用 于 在 按钮 组 中 均匀 的 分 配 按钮 的 宽度 并 跨越 父 元 素 100% 宽度 。 
num 为 按钮 组 中 按钮 的 数量 ， 从 1 到 8: 


实例 


«ul class-"button-group even-3"> 
«li»«button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 
<li><button type="button" class="button">Sony</button></1i> 


</ul> 


<ul class="button-group even-5"> 


<li><button type="button" class="button">Apple</button></1i> 
<li><button type="button" class="button">Samsung</button></1i> 
<li><button type="button" class="button">Sony</button></1i> 
<li><button type="button" class="button">HTC</button></1i> 
<li><button type="button" class="button">Huawei</button></1i> 


</ul> 


<ul class="button-group even-8"> 


<li><button type="button" class="button">A</button></1i> 
<li><button type="button" class="button">B</button></1i> 
<li><button type="button" class="button">C</button></1i> 
<li><button type="button" class="button">D</button></1i> 
<li><button type="button" class="button">E</button></1i> 
<li><button type="button" class="button">F</button></1i> 
<li><button type="button" class="button">G</button></1i> 
<li><button type-"button" class="button">H</button></1i> 
</ul> 


下 拉 菜 单 按钮 
下 拉 菜 单 按钮 可 以 让 用 户 选 取 设 定好 的 值 : 


实例 


<!-- Trigger the dropdown --> 
«a href="#" data-dropdown-z"idO1" class="button dropdown">Dropdown 上 


<!-- The actual dropdown --> 

«ul id-"idO1" data-dropdown-content class="f-dropdown"> 
<li><a href="#">Link 1«/a»«/li» 
<li><a href="#">Link 2«/a»«/li» 
<li><a href="#">Link 3«/a»«/li» 

</ul> 

<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 

$(document).foundation(); 
3) 


«/script» 


四 Eee 
实例 解析 


.dropdown 类 创建 一 个 下 拉 菜 单 按钮 。 
使 用 带 有 data-dropdown="_id_" 属性 的 按钮 或 链接 打开 下 拉 菜 单 。 


id 值 需要 与 下 拉 菜单 的 内 容 (id01) 匹配 。 


在 &lt;ul&gt; 中 添加 .f-dropdown 类 和 data-dropdown-content 属性 来 
创建 下 拉 菜 单 的 内 容 。 


后 初始 化 Foundation JS。 


分 割 按钮 


我 们 也 可 以 创建 一 个 分 割 按钮 的 下 拉 菜 单 。 只 需要 在 按钮 中 添加 . Split 类 并 使 
用 span 元 素 生 成 一 个 方向 箭 的 按钮 : 


实例 





«button class="button split">Split Button 
<span data-dropdown="id01"></span> 
</button> 


«ul id-"idO1" data-dropdown-content class="f-dropdown"> 
<li><a href="#">Link 1«/a»«/li» 
<li><a href="#">Link 2«/a»«/li» 
<li><a href="#">Link 3«/a»«/li» 

</ul> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


W 


</script> 


q 


提示 :后 面 的 教程 中 我 们 将 学 到 更 多 关于 下 拉 菜 单 是 知识 。 


Foundation 图 标 


Foundation 提供 了 283 个 图 标 ， 你 可 以 使 用 css 来 定义 它 的 样式 尺寸 。 
图 标 可 用 于 文本 ， 按 钮 ， 工 具 条 ， 导 航 栏 ， 表 单 等 。 

以 下 是 Foundation 图 标的 实例 : 

刷新 按钮 : 

令 测 图 标 : 


主页 图 标 : 


标语 法 
创建 图 标语 法 格式 如 下 : 


<i class="fi-name"></i> 


name 部 分 替换 为 图 标的 名 字 。 
要 使 用 图 标 我 们 需要 在 «head» 部 分 添加 图 标的 祥 式 文件 : 


«link rel="stylesheet" href="http://static.runoob.com/assets/foundé 





Icon 实例 
以 下 演示 了 使 用 图 标的 实例 : 


实例 


<p>Cloud icon: «i class="fi-cloud"></i></p> 
<p>Cloud icon as a link: 
«a href="#"><1 class="fi-cloud"></i></a> 
</p> 
<p>Styled Cloud icon: «i class="fi-cloud" style="font-size:35px;co- 
<p>Home icon: <i class="fi-home"></i></p> 
<p>Home icon on a button: 
<button type="button" class="button"> 
<i class="fi-home"></i> Home 
«/button» 
</p> 
<p>Home icon on a green button: 
<button type="button" class="button success"> 
<i class="fi-home"></i> Home 
«/button» 
</p> 
<p>Home icon on a large, light blue link button: 
«a href="#" class="button info large"> 
<i class="fi-home"></i> Home 
</a> 
</p> 


LI 





工具 条 图 标 
我 们 可 以 使 用 .icon-bar 类 来 创建 一 个 指定 数量 的 工具 栏 图 标 : 


实例 


«div class="icon-bar five-up"> 
<a href="#" class="item"> 
«i class="fi-home"></i> 
</a> 
<a href="#" class="item"> 
«i class="fi-bookmark"></i> 
</a> 
<a href="#" class="item"> 
<i class="fi-info"></i> 
</a> 
<a href="#" class="item"> 
<i class="fi-mail"></i> 
</a> 
<a href="#" class="item"> 
<i class="fi-like"></i> 
</a> 
</div> 


图 标 描述 使 用 &lt;label&gt; 元 素 : 
实例 
头 


«div class="icon-bar five-up"> 

<a href="#" class="item"> 
<i class="fi-home"></i> 
<label>Home</label> 

</a> 

<a href="#" class="item"> 
<i class="fi-share"></i> 
<label>Share</label> 

</a> 

<a href="#" class="item"> 
<i class="fi-info"></i> 
<label>Info</label> 

</a> 

<a href="#" class="item"> 
<i class="fi-mail"></i> 
<label>Mail</label> 

</a> 

<a href="#" class="item"> 
<i class="fi-magnifying-glass"></i> 
<label>Search</label> 

</a> 

</div> 


disabled 类 可 以 让 图 标 变 成 不 可 点 击 状 态 : 
实例 


«a href="#" class-"item disabled"> 
<i class="fi-share"></i> 
</a> 


<a href="#" class="item disabled"> 
<i class="fi-mail"></i> 
</a> 


vertical 类 用 于 创建 一 个 垂直 的 工具 栏 : 


实例 


«div class="icon-bar vertical five-up"> 


«/div» 


Foundation 图 标 参 考 手 册 


更 多 关于 图 标的 内 容 ， 可 以 参考 我 们 的 Foundation 图 标 手册 。 


Foundation 标签 
label 类 用 于 提供 一 些 附加 信息 : 


实例 


<h2>Example «span class="label">New</span></h2> 
<h3>Example «span class="label">New</span></h3> 
<h4>Example <span class="label">New</span></h4> 


以 下 类 可 以 设置 标签 的 颜色 : .secondary , .success , .info , .warning 
.alert : 


实例 


«span class="label">Default Label</span> 

<span class="label secondary">Secondary Label</span> 
<span class="label success">Success Label</span> 
<span class="label info">Info Label</span> 

<span class="label warning">Success Label</span> 
<span class="label alert">Alert Label</span> 


圆 角 标 签 
.radius 与 .round 类 可 以 为 标签 添加 圆 角 : 


实例 


«span class="label">Default Label</span> 

<span class="label radius">Radius Label</span> 
<span class="label round">Round Label</span> 
<span class="label success round">5</span> 


标签 大 小 
可 以 使 用 CSS 来 修改 标签 的 大 小 : 


实例 


或 


<hi>Example 
<h2>Example 
<h3>Example 
<h4>Example 


<span 
<span 
<span 
<span 


class-"label" style="font-size:36px; ">New</span>< 
class-"label" style="font-size:30px; ">New</span>< 
class="label" style="font-size:20px; ">New</span>< 
class="label">New</span></h4> 











W3School Foundation 教程 


Foundation 提醒 框 


Foundation 可 以 很 简单 的 创建 一 个 提醒 框 : 


This is a default alert box. 


This is a secondary alert box. 


Success! This alert box indicates a successful or positive action. 





Info! This alert box indicates a neutral informative change or action. 











Warning! This alert box indicates a warning that might need attention. 


Alert! This alert box indicates a dangerous or potentially negative action. 


提醒 框 可 以 使 用 .alert-box 类 创建 , 可 以 添加 可 选 的 类 : .secondary , 


,Success , .info , .warning 或 ,alert 


实例 


Foundation 提醒 框 


«div data-alert class="alert-box"> 
This is a default alert box. 
«/div» 


«div data-alert class="alert-box secondary"> 
This is a secondary alert box. 
«/div» 


«div data-alert class="alert-box success"> 
<strong>Success!</strong> This alert box indicates a successful « 
«/div» 


«div data-alert class-"alert-box info"> 
<strong>Info!</strong> This alert box indicates a neutral inform: 
«/div» 
«div data-alert class="alert-box warning"> 
<strong>Warning!</strong> This alert box indicates a warning thai 
«/div» 
«div data-alert class-"alert-box alert"> 


<strong>Alert!</strong> This alert box indicates a dangerous or | 
«/div» 


加 
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圆 角 提醒 框 


.radius 和 .round 类 用 于 为 提醒 框 添加 圆 角 : 








实例 


«div data-alert class="alert-box success radius"> 
<strong>Success!</strong> Alert box with a radius. 
«/div» 


«div data-alert class-"alert-box info round"» 


<strong>Info!</strong> Alert box that is rounded. 
«/div» 


关闭 提醒 框 


要 关闭 提醒 框 ， 可 以 在 连接 或 按钮 元 素 上 添加 class-"close" 类 ， 并 初始 化 
Foundation JS: 


实例 


«div data-alert class="alert-box"> 
This is a default alert box with closing functionality. 
«a href="#" class="close">&times; </a> 

</div> 


<script> 

// Initialize Foundation JS For Functionality 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


q 


x (x) 是 一 个 HTML 字符 实体 表示 一 个 关闭 按钮 的 图 标 ， 而 不 
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Foundation 进度 条 


Foundation 进度 条 可 以 作为 程序 处 理 的 程度 来 显示 : 


el 

-—————————— p 
于 | 
我 们 可 以 在 &lt;div&gt; 元素 中 使 用 .progress 类 来 创建 进度 条 ， 


.meter 类 用 于 子 元 素 (<span>)。 我 们 可 以 在 <span> 元 素 中 设置 进度 百分比 ， 
如 下 所 示 : 


实例 


«div class="progress"> 
«span class="meter" style="width: 70%"></span> 
</div> 


进度 条 颜色 


默认 情况 下 ， 进 度 条 颜色 为 蓝 色 。 不 同 颜色 的 类 为 : .secondary , .success , 
或 .alert : 


实例 


«div class="progress"> 
«span class="meter" style="width:50%"></span> 
</div> 


«div class="progress secondary"> 
<span class="meter" style="width: 50%"></span> 
</div> 


<div class="progress success"> 
<span class="meter" style="width: 50%"></span> 
</div> 


<div class="progress alert"> 
«span class="meter" style="width: 50%"></span> 
</div> 


圆 角 进度 条 


.radius 和 .round 类 用 于 为 进度 条 添加 圆 角 效果 : 
实例 


<div class="progress"> 
<span class="meter" style="width:50%"></span> 
</div> 


<div class="progress radius"> 
<span class="meter" style="width:50%"></span> 
</div> 


<div class="progress rounded"> 
<span class="meter" style="width:50%"></span> 
</div> 


HEART 


可 以 使 用 .small- num 或 .large-_num 来 修改 进度 条 的 宽度 ， 
个 数字 在 1(8.33%) 和 12(default (100%)) 之 间 : 


实例 


«div class="progress large-1"> 
«span class="meter" style="width:50%"></span> 
</div> 


<div class="progress large-6"> 
<span class="meter" style="width:50%"></span> 
</div> 


<div class="progress large-9"> 
<span class="meter" style="width:50%"></span> 
</div> 


<div class="progress large-11"> 
<span class="meter" style="width: 50%"></span> 
</div> 


<!-- Default width --> 
<div class="progress large-12"> 

«span class="meter" style="width: 50%"></span> 
</div> 


num 是 一 


进度 条 标签 


可 以 使 用 CSS 为 进度 条 添加 标签 。 以 下 实例 中 我 们 添加 了 <span> 元 素来 显示 百 分 
比 : 


实例 


<style> 
.percentage { 
position: absolute; 
top: 50%; 
left: 50%; 
color: white; 
transform: translate(-50%, -50%); 
font-size: 12px; 
j 
</style> 


<div class="progress"> 
«span class="meter" style="position: relative;width: 75%"> 
<span class="percentage">75%</span> 
</span> 
</div> 


<div class="progress success"> 
<span class="meter" style="position: relative;width:50%"> 
<span class="percentage">50%</span> 
</span> 
</div> 


<div class="progress alert"> 
<span class="meter" style="position: relative;width:25%"> 
<span class="percentage">25%</span> 
</span> 
</div> 


Foundation 面板 


Foundation 面板 是 一 个 灰色 边框 ， 内 容 含 有 内 边 距 的 模块 。 可 以 使 用 .panel X 
来 创建 : 


实例 


«div class="panel"> 
<h3> 标 题 </h3> 
<p> 文 本 内 容 . .</p> 

</div> 


面板 颜色 


使 用 .callout 类 将 面板 颜色 修改 为 浅 蓝 : 
实例 


«div class="panel callout"> 
<h3> 标 题 </h3> 
<p> 文 本 内 容 . .</p> 

</div> 


圆 角 面板 
使 用 .radius 类 将 面板 设置 为 圆 角 : 
实例 


«div class="panel radius"> 
<h3> 标 题 </h3> 
<p> 文 本 内 容 , . </p> 

</div> 


目 定义 面板 


可 以 使 用 CSS 来 自 定义 面板 ， 以 下 实例 中 我 们 将 面板 作为 一 个 卡片 : 


实例 


«style» 

.panel { 
padding: 0; 
border: none; 
width: 50%; 


div.container { 
text-align: center; 
padding: 15px; 
margin-top: 20px; 


img ( 
width: 10096; 
j 


</style> 


«div class="panel"> 
<img src="img/20121204024112919. jpg" alt="Cinque Terre"> 
«div class="container"> 
<h4> 长 城 </h4> 
<p> 不 到 长 城 非 好 汉 ! ! ! </p> 
«/div» 
«/div» 


Foundation 图 片 


Foundation 提供 了 响应 式 的 图 片 ， 可 以 创建 缩 略 图 喝 图 片 弹 窗 : 





缩 略图 
在 &lt;img&gt; 元 素 外 添加 &lt;a&gt; 元 素 将 图 片 作为 一 个 锚 链 接 。 


在 &lt;a&gt; 标签 中 添加 .th 类 将 图 片 设置 为 缩 略 图 。 BARS Eme 
示 一 个 浅 蓝 色 外 框 : 


实例 


«a href="paris.jpg" class="th"> 
<img src="paris.jpg" alt="Paris"> 
</a> 


q 


响应 式 图 片 


Foundation 中 图 片 默认 是 响应 式 的 。 我 们 可 以 在 实例 页 面 重 置 浏览 器 大 小 来 查 
看 图 片 缩放 效果 。 


角 图 片 

我 们 可 以 在 .th 类 添加 .radius 类 来 设置 圆 角 缩 略 图 : 
实例 

头 


«a href="paris.jpg" class-"th radius"> 
«img src="paris.jpg" alt="Paris"> 
</a> 


简洁 的 弹 窗 
Foundation 可 以 很 容易 实现 图 片 弹 窗 。 


要 创建 一 个 弹 窗 可 以 在 &lt;ul&gt; 元 素 上 添加 .clearing-thumbs 类 及 
data-clearing 属性 。 在 &lt;ul&gt; ”内 添加 图 片 列表 。 


注意 : 图 片 弹 窗 需 要 JavaScript。 所 以 使 用 它 前 需要 初始 化 Foundation JS。 
实例 


«ul class="clearing-thumbs" data-clearing> 
<li><a href="rock600x400. jpg" class="th"><img src="rock200x100 .jt 
<li><a href="skies600x400. jpg" class="th"><img src="skies200x100 
<li><a href="lights600x400. jpg" class="th"><img src="lights200x1( 
</ul> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


3) 


«/script» 
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可 以 添加 data-caption 属性 到 每 个 图 片 来 设置 图 片 的 描述 : 
实例 


«ul class="clearing-thumbs" data-clearing> 
<li><a href="rock600x400. jpg" class="th"><img data-caption="The 上 
<li><a href="skies600x400. jpg" class="th"><img data-caption="Sunt 
<li><a href="lights600x400. jpg" class="th"><img data-caption="No! 
</ul> 





提示 : 你 可 以 在 data-caption 属性 中 添加 HTML 元 素 ， 如 data-caption=" 
<h2>Pulpit Rock</h2><p>Located in Norway</p>" 


当 你 需要 实现 只 显示 一 张 缩 略图 时 你 可 以 在 &lt;ul&gt; 中 使 用 
.clearing-feature 类 并 在 &lt;li&gt; 中 使 用 .clearing-featured-img 


米 
Fo 


实例 


«ul class-"clearing-thumbs clearing-feature" data-clearing> 
<li><a href="rock600x400. jpg" class="th"><img data-caption="The I 
<li><a href="skies600x400. jpg" class="th"><img data-caption="Sunt 


«li class="clearing-featured-img"><a href="lights600x400.jpg" cl: 
</ul> 


加 ES 





m -L +F 、 
Foundation 下 拉 菜 单 
Foundation 下 拉 菜 单 允 许 用 户 从 预定 义 的 下 拉 列 表 中 选取 一 个 值 : 
实例 
<!-- Trigger the Dropdown --> 
«a href="#" data-dropdown="id01i" class="button dropdown">Dropdown 上 
<!-- Dropdown content --> 
«ul id-"idO1" data-dropdown-content class="f-dropdown"> 
<li><a href="#">Link 1«/a»«/li» 
<li><a href="#">Link 2«/a»«/li» 
<li><a href="#">Link 3«/a»«/li» 
</ul> 
<!-- Initialize Foundation JS --> 
<script> 
$(document).ready(function() { 
$(document).foundation(); 
}) 


</script> 


二 OB 


实例 解析 

.dropdown 类 为 按钮 添加 一 个 向 下 的 箭头 符号 "图 标 。 

使 用 按钮 或 链接 的 data-dropdown-" id " 属性 来 打开 下 拉 菜 单 。 
id 值 需要 与 下 拉 菜 单 的 内 容 (id01) 匹配 。 


在 «div», «nav», &lt;ul&gt; 中 添加 .f-dropdown 类 和 
data-dropdown-content 属性 来 创建 下 拉 菜 单 的 内 容 。 


最 后 初始 化 Foundation JS。 
注意 : 在 小 屏幕 上 ， 所 有 的 下 拉 菜 单 的 宽度 是 100%。 





下 拉 菜 单 尺 二 


使 用 .tiny , .small , .medium, .large 或 .mega 来 修改 下 拉 菜 单 的 宽 
度 。 


注意 : 在 小 屏幕 上 ， 所 有 的 下 拉 菜 单 的 宽度 是 100%。 


实例 
«!-- Tiny Dropdown: max-width is 200px --> 
«ul id="id01" data-dropdown-content class="f-dropdown tiny">.. 


<!-- Small Dropdown: max-width is 300px --> 
«ul id-"id02" data-dropdown-content class="f-dropdown small">.. 


<!-- Medium Dropdown: max-width is 500px --» 
«ul id="id03" data-dropdown-content class-"f-dropdown medium"> 


«!-- Large Dropdown: max-width is 800px --> 
«ul id="id04" data-dropdown-content class-"f-dropdown large">.. 


«!-- Mega Dropdown: 100% width --> 
«ul id="id04" data-dropdown-content class-"f-dropdown mega">.. 


下 拉 有 菜单 边 路 
可 以 使 用 .content 类 为 下 拉 菜 单 添加 内 边 距 : 


实例 


<!-- Default Dropdown --> 
«ul id-"idO1" data-dropdown-content class="f-dropdown">.. 


«!-- Dropdown with padding --> 
«ul id="id02" data-dropdown-content class-"f-dropdown content">.. 


e 
其 他 实例 
<div> 下 拉 菜单 中 添加 多 媒体 元 素 : 


实例 


«a href="#" gata-dropdown-"id0O1" class="button dropdown">Dropdown 上 
«div id-"idO1" data-dropdown-content class="f-dropdown medium conte 
<h4>Paris Title</h4> 
<p>Some text.. some text..</p> 
<img src="paris.jpg" alt="Paris" width="400" height="300"> 
<p>Paris, je t'aime.</p> 
</div> 
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下 拉 莱 单方 向 


默认 情况 下 下 拉 菜 单 在 底部 ， 可 以 通过 添加 
data-options-"align:left|right|top" 来 修改 其 方向 : 


实例 


«a href="#" data-dropdown-z"idO1" data-options-"align:right" class=' 
«a href="#" data-dropdownz"id02" data-options-"align:top" class="bt 
«a href="#" data-dropdown="id03" data-options-"align:bottom" class: 
«a href="#" data-dropdown="id04" data-options="align:left" class=" 


SSS 
下 拉 菜 单 触发 条 件 


默认 情况 下 ， 下 拉 菜 单 在 点 击 按钮 后 显示 。 如 果 你 需要 在 鼠标 移动 上 去 后 显示 ， 可 
以 在 按钮 上 使 用 data-options-"is hover:true" 属性 : 





实例 


«a href="#" data-dropdown="id01i" data-options-"is hover:true" clas: 
«ul id-"idO1" data-dropdown-content class="f-dropdown"> 

<li><a href="#">Link 1«/a»«/li» 

<li><a href="#">Link 2«/a»«/li» 

<li><a href="#">Link 3«/a»«/li» 
</ul> 
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分 割 按钮 


我 们 可 以 在 按钮 上 添加 .split 类 来 设置 一 个 分 割 效果 的 按钮 ， 分 割 后 会 在 
<span> 元 素 上 生成 一 个 方向 向 下 的 图 标 按钮 : 





实例 


«button class="button split">Split Button 
«span data-dropdown="id01"></span> 
«/button» 


«ul id="id01" data-dropdown-content class="f-dropdown"> 
<li><a href="#">Link 1«/a»«/li» 
<li><a href="#">Link 2«/a»«/li» 
<li><a href="#">Link 3«/a»«/li» 

</ul> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


Foundation 1f 4 FI 
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实例 


«ul class="accordion" data-accordion> 
<li class="accordion-navigation"> 
<a href="#demo">Simple Collapsible</a> 
«div id="demo" class="content"> 
菜 乌 教程 - - 学 的 不 仅 是 技术 ， 更 是 梦想 1 ! | 
«/div» 
</li> 
</ul> 


<!-- 初始 化 Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


实例 解析 


.accordion 类 和 data-accordion 属性 用 于 创建 一 个 可 折 丢 的 元 素 。 
.accordion-navigation 类 用 于 泻 染 可 折 受 元 素 。 实 际 的 内 容 在 .content 
X («div class="content") 中 ， 点 击 按钮 既 可 以 显示 。 


我 们 在 列表 项 中 添加 &lt;a&gt; 元 素来 控制 (显示 /隐藏 可 折 受 的 内 容 。 然 后 
锚 链 接 使 用 与 可 折 受 内 容 内 容 相同 的 id («a href=#demo" 与 <div id="demo"> 相关 
联 )。 


注意 : 可 折 和 有 登 的 效果 需要 初始 化 Foundation JS. 
默认 情况 下 ， 可 折 受 内 容 是 隐藏 的 。 我 们 可 以 通过 在 &lt;div&gt; 上 添加 
.active 类 让 其 默认 是 显示 的 : 


实例 


«div id="demo" class-"content active"> 


手风琴 效果 用 于 延展 与 设置 可 折 生 内容 。 
手风琴 效果 通过 使 用 多 个 不 同 的 锚 链 接 与 jd 来 创建 : 


实例 


«ul class="accordion" data-accordion> 
<li class="accordion-navigation"> 
«a href="#demo"> 手 风琴 实例 1</a> 
<div id="demo" class="content active"> 
Demo 1 - 菜 乌 教程 - - 学 的 不 仅 是 技术 ， 更 是 梦想 1 | | 
«/div» 
</li> 
<li class="accordion-navigation"> 
«a href="#demo2"> 手 风琴 实例 2«/a» 
«div id="demo2" class="content"> 
Demo 2 - Lorem ipsum dolor sit amet.... 
</div> 
</li> 
<li class="accordion-navigation"> 
«a href="#demo3"> 手 风琴 实例 3«/a» 
<div id="demo3" class="content"> 
Demo 3 - 菜 乌 教程 - - 学 的 不 仅 是 技术 ， 更 是 梦想 1 |! 
«/div» 
</li> 
</ul> 


默认 情况 下 ， 手 风琴 列表 项 有 一 个 是 打开 的 。 如 果 你 想 关 闭 所 有 可 以 使 用 


data-options-"multi expand:true;" 属性 : 
实例 
头 


«ul class-"accordion" data-accordion data-options-"multi expand:tri 


«/ul» 





Foundation 列表 
在 HTML 中 ， 无 序列 表 ( &lt;ul&gt; ) 实例 如 下 : 


«ul» 
<li>List item</1li> 
<li>List item</1li> 
<li>List item</1li> 
<li>List item</1li> 
«/ul» 


List item 
List item 
List item 
List item 


圆圈 标识 符 


在 Foundation 中 ， 无 序列 表 ( &lt;ul&gt; ) 的 前 绥 符 号 为 圆圈 ， 使 用 .circle X, 
实例 如 下 : 


«ul class-"circle"» 
<li>List item</1li> 


Evins 
方块 标识 符 
方块 标识 符 前 级 使 用 .square X: 


«ul class="Square"> 
«li»List item</1i> 


«/ul» 


无 标识 符 
如 果 你 不 需要 标识 符 ， 你 可 以 使 用 .no-bullet 类 : 


«ul class="no-bullet"> 
<li>List item</li> 


«/ul» 
米 
Rs 


<ul class="inline-list"> 


Fl FEB 


一 些 Web 页 面 可 能 需要 列表 菜单 。 


在 HTML 中 ， 列 表 菜 单 同 无 序列 表 &lt;ul&gt; KEL, PA: 


«ul» 
<li><a href="#">Home</a></1i> 
<li><a href="#">Menu 1«/a»«/li» 
<li><a href="#">Menu 2«/a»«/li» 
<li><a href="#">Menu 3«/a»«/li» 
</ul> 


结果 : 


Home 
Menu 1 
Menu 2 
Menu 3 


米 
R. 


«ul class-"inline-list"» 


如 果 你 需要 添加 一 个 水 平 的 列表 ， 可 以 在 &lt;ul&gt; 上 添加 


如 果 你 需要 添加 一 个 水 平 的 菜单 ， 可 以 在 &lt;ul&gt; 上 添加 


.list-inline 


.list-inline 


Foundation 选项 卡 


选项 卡 导 航 可 以 很 好 的 展示 不 同 的 内 容 ， 并 可 以 对 内 容 进行 切换 。 


切换 选项 卡 
Xm O 菜单 f O X82 RAI 


+ 


KA 2 
一 些 文 本 内 容 2 


选项 卡 使 用 &lt;ul class-"tabs" data-tab&gt; 来 创建 , 各 个 选项 使 用 «li» 
元 素 并 加 上 .tab-title 类 来 创建 。 


提示 : 当前 选中 项 可 以 使 用 .active X. 
实例 


«ul class="tabs" data-tab» 
«li class-"tab-title active"»«a href="#">Home</a></1li> 
«li class="tab-title"><a href="#">Menu 1«/a»«/li» 
«li class="tab-title"><a href="#">Menu 2«/a»«/li» 
«li class="tab-title"><a href="#">Menu 3«/a»«/li» 
«/ul» 


垂直 的 选项 卡 


垂直 选项 卡 可 以 使 用 .vertical X: 
实例 
头 


«ul class="tabs vertical" data-tab» 


切换 选项 卡 


如 果 要 设置 切换 标签 ， 可 以 使 用 «div» 元 素 加 上 .content 类 。 每 个 选项 卡 上 加 
上 唯一 的 ID, 并 连接 到 列表 项 (<a href="#menu1" 将 打开 id="menu1" 的 选项 内 
容 )。 最 后 将 所 有 的 选项 内 容 放 在 &lt;div&gt; 元 素 上 ， 该 &lt;div&gt; 元 素 
需要 添加 .tabs-content 类 ， 并 初始 化 Foundation JS。 


注意 active 类 会 自动 添加 到 当前 选中 的 选项 卡 上 : 
实例 


«ul class="tabs" data-tab> 
«li class="tab-title active"><a href="#home">Home</a></1li> 
<li class="tab-title"><a href="#menui">Menu 1«/a»«/li» 
<li class="tab-title"><a href="#menu2">Menu 2«/a»«/li» 
<li class="tab-title"><a href="#menu3">Menu 3«/a»«/li» 
</ul> 
<div class="tabs-content"> 
<div class="content active" id="home"> 
<h3>HOME</h3> 
<p>Home is where the heart is..</p> 
</div> 
«div class="content" id="menui"> 
<h3>Menu 1</h3> 
<p>Some text, blabla</p> 
</div> 
<div class="content" id="menu2"> 
<h3>Menu 2</h3> 
<p>Some other text.</p> 
</div> 
<div class="content" id="menu3"> 
<h3>Menu 3</h3> 
<p>Last tab.</p> 
</div> 
</div> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


选项 卡 淡 人 
使 用 CSS 来 自 定义 选项 卡 淡 入 的 效果 : 


实例 


.tabs-content > .content.active ( 
-webkit-animation: fadeEffect 1s; 
animation: fadeEffect 1s; 


j 


Q-webkit-keyframes fadeEffect ( 
from {opacity: 0;} 
to {opacity: 1;} 

j 


Qkeyframes fadeEffect ( 
from {opacity: 0;} 
to {opacity: 1;} 


Foundation 分 页 


如 果 你 的 网 页 有 很 多 内 容 ， 就 需要 使 用 分 页 功能 。 


分 页 - 当前 页 


当前 页 面 需要 添加 current 类 : 


要 创建 一 个 基础 的 分 页 功能 需要 在 &lt;ul&gt; 


实例 


<ul class="pagination"> 
<li><a href="#">1</a></1i> 
<li><a href="#">2</a></1i> 
<li><a href="#">3</a></1i> 
<li><a href="#">4</a></1i> 
<li><a href="#">5</a></1i> 
«/ul» 


当前 页 面 


元 素 上 加 上 


可 以 在 &lt;li&gt; 加 上 .current 类 来 标注 当前 页 面 : 


实例 


«ul class="pagination"> 


<li class-"current"»«a href="#">1</a></1i> 


<li><a href="#">2</a></1li> 

<li><a href="#">3</a></1i> 

<li><a href="#">4</a></1li> 

<li><a href="#">5</a></1i> 
</ul> 


共用 分 页 


.pagination 


R. 


如 果 需 要 设置 某 个 分 页 不 可 点 击 需 要 使 用 .unavailable X: 
实例 
头 


«ul class="pagination"> 
<li><a href="#">1</a></1li> 
<li><a href="#">2</a></1li> 
«li class="unavailable"><a href="#">3</a></li> 
<li><a href="#">4</a></1li> 
<li><a href="#">5</a></1li> 
</ul> 


分 页 方向 


在 第 一 个 和 最 后 一 个 code><li> 元 素 上 添加 ,arrow 类 插入 HTML 实体 符号 
&laquo; 和 &raquo; 来 创建 分 页 方向 符号 : 


实例 


«ul class="pagination"> 

«li class="arrow"><a href="#">&laquo;</a></1i> 

<li><a href="#">1</a></1i> 

<li><a href="#">2</a></1i> 

<li><a href="#">3</a></1i> 

<li><a href="#">4</a></1i> 

<li><a href="#">5</a></1li> 

«li class="arrow"><a href="#">&raquo;</a></1i> 
</ul> 


分 页 居中 显示 


我 们 可 以 在 <ul> 外 层 添 加 &lt;div&gt; 元 素 ， 并 在 &lt;div&gt; EM 
加 .pagination-centered 类 来 实现 分 页 居中 显示 : 


实例 


«div class="pagination-centered"> 
«ul class="pagination"> 
«li class-"arrow"»«a href="#">&laquo; </a></1i> 
«li class="current"><a href="#">1</a></1li> 
<li><a href="#">2</a></1i> 
<li><a href="#">3</a></1i> 
<li><a href="#">4</a></1i> 
<li><a href="#">5</a></1i> 
«li class-"arrow"»«a href="#">&raquo; </a></1li> 
</ul> 
</div> 


Hoe sin 


HOS SiAT Rr BU n TU BAT N 


在 &lt;ul&gt; 元 素 上 添加 .breadcrumbs 类 来 实现 面包 导 导 航 。 你 可 以 在 


<li> 上 添加 .current 或 .unavailable 类 设置 当前 页 与 不 可 点 击 效 果 : 
实例 


«ul class="breadcrumbs"> 
<li><a href="#">Home</a></1i> 
<li><a href="#">Private</a></li> 
«li class="unavailable"><a href="#">Pictures</a></li> 
«li class="current">Vacation</li> 
</ul> 


子 导 航 


在 页 面 切换 上 ， 子 导航 是 非常 有 用 的 。 


在 &lt;dl&gt; 元 素 上 添加 .sub-nav 类 来 创建 子 导 航 。 在 &lt;dt&gt; 


素 上 添加 标题 ， 为 选中 的 选项 &lt;dd&gt; 添加 .active X: 


实例 


ell 


«ul class="Sub-nav"> 
<dt>Filter:</dt> 
«dd class="active"><a href="#">All</a></dd> 
<dd><a href="#">Active</a></dd> 
<dd><a href="#">Pending</a></dd> 
<dd><a href="#">Suspended</a></dd> 
</ul> 


Foundation NR 


价格 表 可 用 于 展示 企业 产品 : 


实例 


«ul class="pricing-table"> 


«li 
«li 
«li 
«li 
«li 
«li 
«li 
«/ul» 


class="title">Basic</li> 

class="price">$19.99</1li> 

class="description">Great for small business</li> 
class="bullet-item">24/7 Support</1li> 
class="bullet-item">15GB Storage</1li> 
class="bullet-item">1GB Bandwidth</li> 
class="cta-button"><a class="button" href="#">Buy</a></1li> 


实例 解析 


.pricing-table -定义 价格 表 

.title -定义 产品 标题 (黑色 背景 ) 

i .price -定义 价格 (灰色 背景 字体 大 个 项 ) 
i.description - 定义 产品 描述 (如 果 需 要 ) 
i.bullet-item -定义 产品 特点 

i.ca-button -按钮 文本 (如 "Buy", "Join", "Sign Up", 等 ) 


注意 : 表格 会 100% 填充 容器 的 宽度 ， 所 有 的 项 都 有 边框 且 是 居中 的 。 


价格 表 网 格 


以 下 实例 显示 了 三 个 企业 产品 的 价格 (三 项 是 均等 划分 宽度 的 ) 


实例 


«div class="row"> 
«div class="medium-4 columns"> 
<ul class="pricing-table"> 
<li class="title">Basic</li> 
</ul> 
</div> 
<div class="medium-4 columns"> 
<ul class="pricing-table"> 
«li class="title">Pro</1li> 
</ul> 
</div> 
<div class="medium-4 columns"> 
«ul class="pricing-table"> 
<li class="title">Premium</1i> 
</ul> 
</div> 
</div> 


Foundation 顶部 导航 栏 


顶部 导航 栏 放 在 页 面 头 部 : 


Home Sign Up Search 





实例 


«nav class="top-bar" data-topbar> 
<ul class="title-area"> 
<li class="name"> 
<!-- 如 果 你 不 需要 标题 或 图 标 可 以 删 掉 它 - -> 
<hi><a href="#">WebSiteName</a></h1> 
</li> 
«1-- JN Fiat: 去 掉 **.menu-icon** 类 ， 可 以 去 除 图 标 。 
如 果 需 要 只 显示 图 片 ， 可 以 删除 "Menu" 文本 --> 
«li class-"toggle-topbar menu-icon"><a href="#"><Span>Menu</spi 
</ul> 


<section class="top-bar-section"> 
<ul class="left"> 
«li class="active"><a href="#">Home</a></1i> 
<li><a href="#">Page 1«/a»«/li» 
<li><a href="#">Page 2«/a»«/li» 
<li><a href="#">Page 3«/a»«/li» 
</ul> 
</section> 
</nav> 


<!-- 初始 化 Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 





实例 解析 


使 用 &lt;nav class-"top-bar" data-topbar&gt; 创建 标准 工具 条 。 

.title-area 类 定义 了 网 站 logo 区 域 (必须 防止 li.name 内 ) 。 屏 幕 变 小 后 你 
就 可 以 看 到 一 个 "menu" 按钮 。 Foundation 的 菜单 会 根据 屏幕 尺寸 自动 折 熏 喝 延 
E : 


小 屏幕 上 ， 由 于 尺寸 的 原因 很 多 选项 会 被 隐藏 。  li.toggle-topbar menu.icon 
类 创建 了 一 个 菜单 的 按钮 ， 点 击 它 可 以 显示 被 隐藏 的 选项 。 提示 : 重 置 浏览 器 窗口 
查看 效果 。 


.top-bar-section 定义 了 导航 的 链接 部 分 。 .1left 类 指定 链接 左 对 齐 。 
.active 类 用 于 显示 选中 的 项 ， 背 景 为 蓝 色 。 


提示 : 如 果 你 想 导航 链接 右 对 齐 可 以 将 .left 修改 为 ,right 
实例 


«section class="top-bar-section"> 
«ul class="right">... 


你 可 以 同时 设置 左边 对 齐 与 右边 对 齐 : 
实例 


<section class="top-bar-section"> 
«ul class="left"> 
«li class="active"><a href="#">Home</a></1i> 
<li><a href="#">Page 1«/a»«/li» 
<li><a href="#">Page 2«/a»«/li» 
</ul> 
<ul class="right"> 
<li><a href="#">Sign Up</a></1i> 
<li><a href="#">Login</a></1i> 
</ul> 
</section> 


导航 栏 可 以 通过 .divider 类 来 添加 分 割 线 (大 屏幕 上 是 垂直 的 线 ， 小 屏幕 上 是 
水 平 线 ) 


实例 


«ul class="left"> 
«li class="active"><a href="#">Home</a></1li> 
«li class-"divider"»«/li» 
<li><a href="#">Page 1«/a»«/li» 
«li class="divider"></1i> 
<li><a href="#">Page 2«/a»«/li» 
<li class-"divider"»«/li» 
<li><a href="#">Page 3«/a»«/li» 
«li class="divider"></1i> 
</ul> 


导航 栏 的 下 拉 菜 单 


顶部 导航 栏 可 以 设置 下 拉 菜 单 。 


可 以 通过 在 &lt;li&gt; 元 素 上 添加 .has-dropdown 类 来 设置 下 拉 菜 单 : 
实例 


«section class="top-bar-section"> 
«ul class="left"> 
<li class-"active"»«a href="#">Home</a></1i> 
<li class="has-dropdown"> 
<a href="#">Dropdown</a> 
<ul class="dropdown"> 
<li><a href="#">First link in dropdown</a></1i> 
<li><a href="#">Second link in dropdown</a></1i> 
«li class="active"><a href="#">Active link in dropdown</a>< 
</ul> 
</li> 
</ul> 


</section> 





分 割 线 
使 用 .divider 类 来 设置 下 拉 菜 单 的 分 割 线 : 


实例 


«ul class="dropdown"> 
<li><a href="#">Apple</a></1i> 
<li><a href="#">Banana</a></1i> 
<li><a href="#">Orange</a></1i> 
<li class="divider"></1i> 
<li><a href="#">Kale</a></1li> 
<li><a href="#">Spinach</a></1i> 
</ul> 


tt pe kx 
下 拉 菜 单 标签 
在 &lt;li&gt; 内 添加 &lt;label&gt; 元 素来 设置 下 拉 菜 单 的 标签 (标题 ): 


实例 


«ul class="dropdown"> 
<li><label>Fruit</label></1i> 
<li><a href="#">Apple</a></1i> 
<li><a href="#">Banana</a></1i> 
<li><a href="#">Orange</a></1i> 
<li class="divider"></1li> 
<li><label>Vegetable</label></1i> 
<li><a href="#">Kale</a></1li> 
<li><a href="#">Spinach</a></1i> 

</ul> 


FIER Pius e 
下 拉 菜单 可 以 再 嵌入 一 个 下 拉 菜单 : 


实例 


«section class="top-bar-section"> 
«ul class="left"> 
«li class="has-dropdown"> 
«a href="#">Dropdown</a> 
«ul class="dropdown"> 
<li><label>Level 1</label></1i> 
<li><a href="#">Link</a></1i> 
<li><a href="#">Link</a></1li> 
<li class="has-dropdown"> 
<a href="#">New dropdown</a> 
<ul class="dropdown"> 
<li><label>Level 2</label></1i> 
<li><a href="#">2nd level dropdown</a></1i> 
<li><a href="#">2nd level dropdown</a></1i> 
<li class="has-dropdown"> 
<a href="#">New dropdown</a> 
<ul class="dropdown"> 
<li><label>Level 3</label></1i> 
<li><a href="#">3rd level dropdown</a></1i> 
<li><a href="#">3rd level dropdown</a></1i> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</section> 


Bm 


默认 情况 下 导航 栏 的 下 拉 菜 单 在 鼠标 移动 过 去 后 显示 ， 我 们 可 以 使 用 
data-options-"is hover: false" 属性 来 设置 导航 栏 在 鼠标 在 点 击 后 显示 : 


实例 


«nav class-"top-bar" data-topbar data-options-"is hover: false"> 


导航 栏 上 的 按钮 及 图 标 


你 可 以 在 导航 栏 上 放置 图 标 和 按钮 : 
实例 
<li><a href="#" class="button">Button Link«/a»«/li» 


你 可 以 在 导航 栏 上 放 上 图 标 ， 更 多 图 片 样式 可 以 查看 Foundation 图 标 教程 : 
实例 
Se 


<head> 

<!-- Foundation 图 标 样式 --> 

<link rel="stylesheet" href="http://static.runoob.com/assets/foundé 
</head> 


<ul class="left"> 
<li class="active"><a href="#"><i class="fi-home"></i> Home</a><, 
<li><a href="#"><i class="fi-torso"></i> Sign Up</a></1i> 
<li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></_ 
</ul> 


4] mca] 





固定 导航 栏 


导航 栏 可 以 固定 在 页 面 顶 部 。 
页 面 滚动 时 导航 栏 在 顶部 是 不 会 动 的 。 
要 固定 导航 栏 只 需要 将 导航 栏 放 在 &lt;div class-"fixed"&gt; 内 即 可 : 


实例 


«div class="fixed"> 
«nav class="top-bar" data-topbar> 


«/nav» 
«/div» 
Lj. ra 
导航 栏 绝 对 定位 
我 们 可 以 将 导航 栏 放 在 &lt;div class-"sticky"&gt; 内 来 设置 导航 栏 的 绝对 
定位 ， 当 滚动 条 滚 到 到 该 区 域 时 ， 该 导航 栏 就 像 固 定 导 航 栏 一 样 在 顶部 不 动 : 
实例 
头 
«div class="sticky"> 
«nav class="top-bar" data-topbar> 
</nav> 
</div> 
当 你 使 用 .sticky 类 时 ， 顶 部 导航 栏 在 所 有 屏幕 尺寸 上 将 固定 不 动 。 如 果 你 需 


在 指定 屏幕 上 设 定 只 需要 在 &lt;nav&gt; 上 添加 
data-options-"sticky on: small|medium|large" 属性 即 可 : 


实例 


«div class="sticky"> 
«1-- 只 有 在 大 屏幕 上 --> 
«nav class="top-bar" data-topbar data-options-"sticky on: large": 


«/nav» 
«/div» 


Ro RÀ 
或 者 通过 数组 设置 多 个 屏幕 尺寸 : 





实例 


«div class="sticky"> 
«1-- 小 屏幕 和 大 屏幕 (没有 中 等 屏幕 ) - -> 
«nav class="top-bar" data-topbar data-options-"sticky on: [small, 
</nav> 

</div> 


«| | 








Foundation 侧 边 栏 


侧 边栏 导航 


Foundation 使 用 &lt;ul class-"side-nav"&gt; 创建 侧 边 栏 : 
实例 


«ul class="side-nav"> 
<li><a href="#">Link 1«/a»«/li» 
<li><a href="#">Link 2«/a»«/li» 
<li><a href="#">Link 3«/a»«/li» 
<li><a href="#">Link 4«/a»«/li» 
</ul> 


激活 链接 与 分 割 线 


已 点 击 的 链接 可 以 在 &lt;li&gt; 上 使 用 .active 类 来 标识 ， 使 用 
.divider 类 添加 水 平分 割 线 : 


实例 


«ul class="side-nav"> 
«li class="active"><a class="a" href="#">Link 1«/a»«/li» 
<li><a class="a" href="#">Link 2«/a»«/li» 
<li class-"divider"»«/li» 
<li><a class="a" href="#">Link 3«/a»«/li» 
<li><a class="a" href="#">Link 4«/a»«/li» 
</ul> 


网 格 中 的 侧 边 栏 


我 们 可 以 使 用 网 格 设计 模式 来 设置 侧 边 导航 栏 ， 实 例如 下 : 


实例 


«div class="row"> 
«div class="medium-4 columns" style="background-color:#f1if1if1; "> 
«ul class="side-nav"> 
«li class="active"><a href="#">Home</a></1i> 
<li><a href="#">Learn HTML«/a»«/1li» 
</ul> 
</div> 
<div class="medium-8 columns"> 
<hi>Side Nav</h1i> 
<p>Some text. .</p> 
</div> 
</div> 


Sa 


Foundation 滑动 导航 (Off-Canvas) 


侧 边 栏 导 航 


Off-Canvas 滑动 导航 现在 逐渐 在 移动 页 面 变 得 越 来 越 流行 了 (点 击 菜单 按钮 菜单 从 
左 侧 滑 出 ): 


三 Off-canvas 实例 
学 的 不 仅 是 技术 ， 更 是 梦想 ! ! | 
创建 滑动 导航 
创建 滑动 导航 实例 如 下 : 


实例 


<!-- 最 外 层 div : 页 面 布局 --> 
«div class-"off-canvas-wrap" data-offcanvas» 
<!-- 内 部 元 素 : "工具 栏 ” 内容 (Aim, BE, TARAS) --> 
«div class="inner-wrap"> 
«nav class="tab-bar"> 
«section class="left-small"> 
«a class-"left-off-canvas-toggle menu-icon" href="#"><span: 
</section> 


<section class="middle tab-bar-section"> 
«hi class="title">0ff-canvas Example</h1> 
</section> 
</nav> 


<!-- 滑动 菜单 --> 
<aside class="left-off-canvas-menu"> 
<!-- Add links or other stuff here --> 
«ul class="off-canvas-list test"> 
<li><label>Heading</label></1i> 
<li><a href="#">Link 1</a></1i> 
<li><a href="#">Link 2«/a»«/li» 
</ul> 
</aside> 
<!-- 主要 内 容 --> 
«section class="main-section"> 
<h3>Lorem Ipsum</h3> 
<p>... </p> 
</section> 


SHE E 
«a Class="exit-off-canvas"></a> 


«/div» «!-- 结束 内 部 内 容 s 
</div> «!-- 结束 滑动 菜单 --> 


«!-- 初始 化 Foundation JS --» 
«script» 
$(document).ready(function() { 

$(document).foundation(); 
3) 


</script> 


E E S 





Foundation 麦哲伦 (Magellan) 导航 


Magellan 
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如 何 创 建 麦哲伦 导航 
麦哲伦 导航 就 是 一 个 导航 索引 ， 创 建 方式 如 下 


实例 


<div data-magellan-expedition="fixed"> 
«dl class="sSub-nav"> 
«dd data-magellan-arrival-"pagei"»«a href="#pagei">Page 1</a><, 
<dd data-magellan-arrival="page2"><a href="#page2">Page 2</a><, 
«/dl» 
«/div» 


«h3 data-magellan-destination="page1i">Page1</h3> 
«a name="pagei"></a> 


«h3 data-magellan-destination="page2">Page2</h3> 
«a name="page2"></a> 


«!-- Initialize Foundation JS --> 

«script» 

$(document).ready(function() { 
$(document).foundation(); 


;) 


«/script» 


«| m 








实例 解析 


在 «div» 元 素 上 添加 data-magellan-expedition-"fixed" 属性 来 创建 麦哲伦 
导航 。 


然后 在 &lt;dd&gt; 或 &lt;li&gt; 上 添加 
data-magellan-arrival-" value " 属性 ， 后 面 添加 一 个 与 该 属性 值 一 样 的 链 
接 (page1)。 


使 用 data-magellan-destination-"value" 属性 来 控制 麦哲伦 导航 的 目标 , 后 
面 紧 跟 的 &lt;a&gt; 元 素 添 加 name="_value_" 属性 。 两 个 属性 的 值 必须 与 
data-magellan-arrival 的 值 一 致 (page1)。 


最 后 ， 初 始 化 Foundation JS ， 用 户 在 滚动 页 面 时 导航 就 会 根据 当前 显示 的 内 容 自 
动 切换 。 


麦哲伦 导航 头 部 工具 条 
麦哲伦 导航 使 用 头 部 工具 条 实例 : 


实例 


«div data-magellan-expedition="fixed"> 
«nav class="top-bar" data-topbar> 


<section class="top-bar-section"> 
<ul class="left"> 
«li data-magellan-arrival="pagei"><a href="#pagei">Page 1<, 
<li data-magellan-arrival="page2"><a href="#page2">Page 2<, 
</ul> 
</section> 


</nav> 
</div> 


<h3 data-magellan-destination="page1i">Page1</h3> 
«a name="pagei"></a> 


<h3 data-magellan-destination="page2">Page2</h3> 
<a name="page2"></a> 





麦哲伦 导航 内 边 距 


默认 情况 下 ， 麦 哲 伦 导 航 的 &lt;div&gt; 元 素 有 10px 的 内 边 距 。 可 以 使 用 
CSS 移 除 它 : 


实例 


[data-magellan-expedition], [data-magellan-expedition-clone] ( 


padding: 0; 
麦哲伦 导航 选项 


使 用 data-options 属性 修改 麦哲伦 导航 的 设置 , 例如 
&lt;div data-magellan-expedition="fixed" data-options-"destination : 


名 称 类 型 O Su 描述 Pe 
active class string active ”指定 激活 链接 的 类 
指定 导航 在 什么 时 候 需 要 固 
threshold number 0 定位 置 。 会 根据 滚动 条 滚动 


计算 ， 默 认为 (auto), 


设 该 值 设 定 了 导航 链接 显示 
destination threshold number 20 为 激活 (REFR) 时 导航 
列表 距离 顶部 的 值 。 


指定 了 导航 条 距离 头 部 的 像 


fixed top number 0 Ri 


Foundation 表单 


Foundation 表单 控制 会 自动 设置 为 全 局 样式 : 


所 有 &lt;textarea&gt; , &lt;select&gt; 及 &lt;input&gt; 元 素 宽度 都 
为 100%， 且 带 有 外 边 距 、 内 边 距 、 阴 影 喝 鼠 标 移动 效果 。 


实例 


<form> 
Input : 
«input type="text" placeholder="Name"> 


Textarea: 
«textarea rows="4" placeholder="Address"></textarea> 


Select: 

<select> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 

</select> 

</form> 


标签 


在 表单 中 使 用 &lt;label&gt; 元 素来 设置 标签 ， 标 签 可 以 添加 for 属性 和 id 属 
性 。 用 户 在 点 击 标签 或 输入 域 时 获取 输入 框 焦点 : 


实例 


«form» 
«label for="name">Input 
<input type="text" placeholder="Name" id="name"> 
«/label» 


«label for="adr">Label 
«textarea rows="4" placeholder="Address" id="adr"></textarea> 
</label> 


<label for="num">Select 
<select id="num"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
</select> 
</label> 
</form> 


加 [ED 
如 果 需 要 设置 标签 右 对 齐 ， 可 以 使 用 ,right X: 


实例 


<label class="right"> 


Fieldset 


Foundation 泻 染 &1t;fieldset&gt; 元 素 的 样式 如 下 : 
实例 
头 


«form» 
<fieldset> 
<legend>Fieldset Legend</legend> 
<label>Name 
<input type="text" placeholder="First Name. ."> 
</label> 
<label>Email 
<input type="text" placeholder="Enter email. ."> 
</label> 
</fieldset> 
</form> 


错误 状态 

使 用 .error 类 来 设置 错误 的 标签 、 输 入 框 、 文 本 框 样式 : 
实例 

头 


«form» 
«label class="error">Error 
<input type="text" placeholder="Name. ."> 
</label> 
«small class="error">Wrong input</small> 


<textarea rows="4" placeholder="Address"></textarea> 


«small class="error">Wrong input</small> 
</form> 


q 


你 需要 使 用 JavaScript 来 更 新 用 户 输入 的 错误 状态 。 


,NA [. naatin VAT d 
JODOCNOOI FOUNAATION zX^-x 


Foundation 输入 框 尺寸 


First Name 


Name 


Last Name 


Last Name 


City 


City 


Search 


使 用 网 格 的 列 来 设置 输入 框 的 大 小 ， 如 .large-6 , .medium-6 , 等。 
更 多 网 格 系统 知识 ， 可 以 点 击 网 格 系统 教程 。 


实例 


oundatuon 


«form» 
«div class="row"> 
«div class="large-10 medium-7 columns"> 
<label>large-10 medium-7 (100% on small) 
<input type="text" placeholder="Name"> 
</label> 
</div> 
</div> 


<div class="row"> 
<div class-"small-5 columns"> 
«label»small-5 
<input type="text" placeholder="Name"> 
</label> 
</div> 
</div> 


<div class="row"> 
<div class="medium-3 columns"> 
<label>medium-3 (100% on small) 
<input type="text" placeholder="Name"> 
</label> 
</div> 
</div> 
</form> 


相等 大 小 列 
以 下 演示 了 相等 大 小 列 的 实例 : 


实例 


«form» 
«div class="row"> 
«div class="medium-4 columns"> 
<label>medium-4 (100% on small, stacked) 
<input type="text" placeholder="Name"> 
</label> 
</div> 


<div class="medium-4 columns"> 
<label>medium-4 (100% on small, stacked) 
<input type="text" placeholder="Name"> 
</label> 
</div> 


<div class="medium-4 columns"> 
<label>medium-4 (100% on small, stacked) 
<input type="text" placeholder="Name"> 
</label> 
</div> 
</div> 
</form> 


内 联 标 签 


如 果 你 希望 你 的 标签 内 容 显 示 在 左边 (不 是 上 边 ) ， 可 以 将 标签 元 素 label KEM 
入 框 左边 的 不 同 的 列 上 ， 并 使 用 .inline 类 来 设置 垂直 居中 : 


实例 


<form> 
«div class="row"> 
<div class="small-8"> 
«div class="row"> 
<div class="small-3 columns"> 
«label for="name" class="inline right">Name</label> 
</div> 
<div class="small-9 columns"> 
«input type-"text" id-"name" placeholder="First Name.."> 
«/div» 
«/div» 
«/div» 
«/div» 
«/form» 
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你 可 以 在 &lt;div class="row collapse"&gt; ”中 添加 前 置 和 后 置 标签 ， 元 素 
Jj: &lt; element class="postfix"&gt; 或 


&lt; element class="prefix"agt; 。 可 以 使 用 网 格 系统 来 设置 前 置 和 后 置 标 
签 的 大 小 : 





实例 


«form» 
«div class="row"> 
«div class="large-6 columns"> 
<div class="row collapse prefix-radius"> 
«div class="small-3 columns"> 
<span class="prefix">Prefix</span> 
</div> 
«div class-"small-9 columns"> 
«input type="text" placeholder="Value"> 
</div> 
</div> 
</div> 
<div class="large-6 columns"> 
<div class="row collapse postfix-radius"> 
«div class="small-9 columns"> 
<input type="text" placeholder="Value"> 
</div> 
«div class="small-3 columns"> 
«span class="postfix">Postfix</span> 
</div> 
</div> 
</div> 
</div> 
</form> 


前 置 和 后 置 标签 按钮 





可 以 使 用 &lt;a&gt; 元 素 添加 .button 类 来 设置 前 置 和 后 置 按钮 : 
实例 
«a href="#" class="postfix button">Go</a> 


— 


前 置 和 后 置 标签 圆 角 按钮 


实例 


«form» 
«div class="row"> 
«div class="large-6 columns"> 
<div class="row collapse prefix-radius"> 
«div class="small-3 columns"> 
<span class="prefix">Prefix</span> 
</div> 
«div class-"small-9 columns"> 
«input type="text" placeholder="Value"> 
</div> 
</div> 
</div> 
<div class="large-6 columns"> 
<div class="row collapse postfix-radius"> 
«div class="small-9 columns"> 
<input type="text" placeholder="Value"> 
</div> 
«div class="small-3 columns"> 
«span class="postfix">Postfix</span> 
</div> 
</div> 
</div> 
</div> 
<div class="row"> 
<div class="large-6 columns"> 
<div class="row collapse prefix-round"> 
«div class="small-3 columns"> 
<a href="#" class="button prefix">Go</a> 
</div> 
«div class-"small-9 columns"> 
«input type="text" placeholder="Value"> 
</div> 
</div> 
</div> 
<div class="large-6 columns"> 
«div class="row collapse postfix-round"> 
«div class-"small-9 columns"> 
«input type="text" placeholder="Value"> 
</div> 
«div class-"small-3 columns"> 
«a href="#" class="button postfix">Go</a> 
</div> 
</div> 
</div> 
</div> 
</form> 


Foundation 开关 


开关 是 在 鼠标 点 击 (手指 敲 击 ) 下 在 "On" 和 "Off 状态 下 切换 : 


E €O 


切换 开关 使 用 &lt;div class="switch"&gt; 


创建 。 &lt;div&gt; 内 添加 带 有 唯一 id 的 


&lt;input type="checkbox"&gt; ,  &lt;label&gt; 


&lt;input type-"checkbox"&gt; 的 id 相 匹 配 : 
实例 
头 


«div class="switch"> 
<input id="mySwitch" type="checkbox"> 
«label for="mySwitch"></label> 

</div> 


开 天 大 小 


使 用 .large , .small 或 .tiny 类 来 设置 开关 大 小 : 


实例 


«div class="switch large">...</div> 
«div class="switch">...</div> 

«div class-"switch small">...</div> 
«div class-"switch tiny">...</div> 


圆 角 切换 开关 
使 用 .radius 和 .round 类 来 设置 圆 角 切 换 开 关 : 
实例 


«div class="Switch">...</div> 
«div class-"switch radius">...</div> 
«div class-"switch round">...</div> 


TRH for 属性 需要 和 与 


开 天 组 


可 以 通过 设置 单 选 按钮 (radio) 来 设置 单个 选项 。 注 意 : 注意 各 个 选项 的 name 属性 
必须 一 致 (实例 中 为 "myGroup" )。 


实例 


<div class="switch"> 
«input id="mySwitchi" type="radio" name="myGroup"> 
«label for="mySwitchi"></label> 

</div> 


<div class="switch"> 
<input id="mySwitch2" type="radio" name="myGroup" checked> 
<label for="mySwitch2"></label> 

</div> 


Foundation 滑 块 
Foundation 滑 块 允许 用 户 通 过 拖 动 来 选取 区 间 值 : 


a so 


滑 块 可 以 通过 使 用 &lt;div class="range-slider" data-slider&gt; 创建 。 
在 &lt;div&gt; 内 , 添加 两 个 &lt:span&gt; 元 素 : 

&lt;span class="range-slider-handle"&gt; 创建 矩形 滑 块 〈( 蓝 色 背 景 ) ， 
&lt;span class-"range-slider-active-segment"&gt; 是 在 滑 块 后 的 灰色 横 
条 ， 是 滑 块 拖 动 区 域 。 


主意 : 滑 块 需要 使 用 JavaScript。 所 以 你 需要 初始 化 oundation JS: 
实例 


«div class-"range-slider" data-slider> 

«span class="range-slider-handle"></span> 

«span class="range-slider-active-segment"></span> 
«/div» 


«!-- Initialize Foundation JS --> 

«script» 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


HAMRA? 


使 用 .radius 和 .round 类 来 添加 圆 角 滑 块 。 使 用 .disabled 类 来 禁用 滑 
块 : 


实例 


«div class="range-slider" data-slider>..</div> 

<div class="range-slider radius" data-slider>...</div> 
<div class="range-slider round" data-slider>...</div> 
<div class="range-slider disabled" data-slider>...</div> 


使 用 .vertical-range 类 和 data-options="vertical: true;" 来 创建 垂直 
Nr: š 
YAIR: 


实例 


«div class-"range-slider vertical-range" data-slider data-options-' 
«span class="range-slider-handle"></span> 
«span class="range-slider-active-segment"></span> 

«/div» 
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默认 情况 下 ， 滑 块 放 在 横 条 的 中 间 (数值 为 "50")。 可 以 通过 添加 
data-options="initial: num " 属性 来 修改 默认 值 : 


实例 


«div class-"range-slider" data-slider data-options="initial: 80;"> 
«span class="range-slider-handle"></span> 
«span class="range-slider-active-segment"></span> 

«/div» 


LEES Ll 


显示 滑 块 值 


如 果 我 们 需要 在 滑 块 拖 动 时 实时 显示 值 ， 可 以 通过 在 &lt;div&gt; 中 添加 
data-options-"display selector:£ id " 属性 且 元 素 id 值 与 滑 块 的 id 匹 
配 ， 如 下 实例 : 


实例 


«!-- Display the slider value in this span --> 
«span id="mySlider"></span> 


«div class-"range-slider" data-slider data-options-"display select: 
«span class="range-slider-handle"></span> 
«span class="range-slider-active-segment"></span> 

«/div» 


‘ ay 








组 合 数据 选项 
以 下 实例 使 用 了 display selector 和 initial 数据 选项 : 


实例 


«span id="mySlider"></span> 
«div class-"range-slider" data-slider data-options-"display select 
«span class="range-slider -handle"></span> 


«span class="range-slider-active-segment"></span> 
</div> 


SS TSS 





步 长 


默认 情况 下 ， 滑 块 滑动 的 增加 减少 的 数量 为 "1"。 可 以 通过 添加 
data-options-"step: _num_;" 属性 来 修改 步 长 值 。 实 例 中 设置 为 25: 


实例 


«span id="mySlider"></span> 
«div class-"range-slider" data-slider data-options-"display select: 
«span class="range-slider-handle"></span> 


«span class="range-slider-active-segment"></span> 
«/div» 





自 定义 区 间 


默认 情况 下 ， 区 间 值 在 "0" 到 "100"。 可 以 通过 添加 data-options start 和 
end 来 设置 区 间 值 。 以 下 实例 设置 区 间 值 为 "1" 到 "20": 


实例 


<span id="mySlider"></span> 


«div class-"range-slider" data-slider data-options-"display select 
«span class="range-slider-handle"></span> 


«span class="range-slider-active-segment"></span> 
«/div» 


‘ — % 
使 用 网 格 








以 下 使 用 为 在 网 格 中 使 用 滑 块 : 


实例 


«div class="row"> 
«div class-"small-10 columns"> 
«div class-"range-slider" data-slider data-options-"display se: 
«span class="range-slider-handle"></span> 


«span class="range-slider-active-segment"></span> 
«/div» 


«/div» 
«div class-"small-2 columns"> 


«!-- The display element (Tip: use CSS to perfectly position i! 


«span id-"mySlider" style-"display:block;margin-top:14px;"»«/s[ 
«/div» 


«/div» 





使 用 Input 


以 下 实例 使 用 &lt;input&gt; 取代 &lt;span&gt; 


实例 


来 显示 滑 块 的 值 : 


<div class="row"> 
«div class-"small-10 columns"> 
«div class-"range-slider" data-slider data-options-"display se: 
«span class="range-slider-handle"></span> 


«span class="range-slider-active-segment"></span> 
«/div» 


«/div» 
«div class-"small-2 columns"> 


«!-- The display element (Tip: use CSS to perfectly position i! 


«input type="number" id="mySlider" style-"margin-top:7px;" vali 
«/div» 


«/div» 
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Foundation 提示 框 


提示 框 在 鼠标 移动 到 元 素 上 后 显示 : 


鼠标 移 到 我 这 ! 我 这 也 能 显示 ! 





我 们 可 以 在 任何 元 素 上 添加 data-tooltip 属性 来 创建 提示 信息 。 使 用 title 
属性 来 设置 提示 信息 的 文本 。 


注意 : 滑 块 需要 使 用 JavaScript。 所 以 你 需要 初始 化 oundation JS: 
实例 
头 


«span data-tooltip title="Hooray!">Hover over me!</span> 


«!-- Initialize Foundation JS --> 

«script» 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 

.has-tip 类 可 以 加 粗 鼠 标 移动 的 文本 : 
实例 
头 


«span data-tooltip class="has-tip" title="Hooray!">Hover over me!<, 





E 


提示 框 显示 位 置 


默认 情况 下 ， 提 示 框 会 出 现在 元 素 的 底部 。 


可 以 使 用 .tip-top , .tip-left , .tip-right or .tip-bottom (默认 ) 来 
设置 提示 框 的 位 置 。 


注意 : 在 小 尺寸 的 屏幕 上 ， 提 示 框 的 宽带 是 100%。 


实例 


«span data-tooltip 
«span data-tooltip 
«span data-tooltip 
«span data-tooltip 


‘| 


class="has-tip tip-top" title="Hooray!">Top</spé 
class="has-tip tip-bottom" title="Hooray!">Bottc 
class="has-tip tip-left" title="Hooray!">Left</: 
class-"has-tip tip-right" title="Hooray!">Right< 


A E: 








角 提 示 框 


,radius 和 .round 


实例 


«span data-tooltip 
«span data-tooltip 
«span data-tooltip 


类 用 于 设置 圆 角 提示 框 : 


class="has-tip" title="Hooray!">Default</span> 
class="has-tip radius" title="Hooray!">Radius</: 
class="has-tip round" title="Hooray!">Round</spé 





Foundation 模 态 框 


模 态 框 是 一 个 显示 在 页 面 头 部 的 弹 窗 。 


我 们 可 以 在 容器 元 素 上 (如 &lt;div id-"myModal" ) 使 用 唯一 并 添加 
.reveal-modal 类 和 data-reveal 属性 来 添加 模 态 框 。 E ru 
上 使 用 data-reveal-id-" id " 属性 阿里 打开 模 态 框 。 ja 必须 与 容器 id 一 致 
(实例 为 "myModal")。 


如 果 你 希望 在 点 击 模 态 框 之 外 的 区 域 来 关闭 模 态 框 。 你 可 以 在 模 态 框 的 关闭 按钮 
&lt;a&gt; 标签 上 添加 .close-reveal-modal 类 来 实现 。 


注意 : 滑 块 需要 使 用 JavaScript。 所 以 你 需要 初始 化 oundation JS: 
实例 


<!-- Trigger the Modal --> 
«button type="button" class="button" data-reveal-id="myModal">Clicl 


<!-- The Modal Content --> 
<div id="myModal" class="reveal-modal" data-reveal> 
<h2>Heading in Modal.</h2> 
<p>Some text in the modal.</p> 
<p>Some text in the modal.</p> 
<a class="close-reveal-modal">&times ;</a> 
</div> 


<!-- Initialize Foundation JS --> 

<script> 

$(document).ready(function() { 
$(document).foundation(); 

3) 


«/script» 


模 态 框 大 小 


可 以 在 模 态 框 容器 上 添加 以 下 类 来 设置 模 态 框 的 大 小 : 


.tiny :3096 宽度 

.small : 4096 宽度 
,medium : 6096 宽度 
.large : 7096 宽度 
.xlarge :95% 宽度 
.full : 10096 宽度 和 高 度 





注意 : 在 平板 、 笔 记 本 、PC 电脑 上 默认 为 80% 宽度 ， 在 小 屏幕 设备 上 是 100% 5E 
度 。 
实例 
头 
«div id-"myModal" class="reveal-modal tiny|small|medium|large|xlart 


‘ = 


ABR ATE 


你 可 以 在 模 态 框 内 伐 入 模 态 框 ， 可 以 在 第 一 个 模 态 框 上 添加 新 的 触发 按钮 。 你 必须 
AWA RRR ATE BNE BN id : 








实例 


«!-- Trigger the modal --> 
«a href="#" class="button" data-reveal-id="myModal">Click To Open I 


<!-- The First Modal --> 
<div id="myModal" class="reveal-modal" data-reveal> 
<h2>First Modal</h2> 
<p>Some text. .</p> 
<p><a href="#" data-reveal-id-"secondModal" class="button">Open £ 
<a class="close-reveal-modal">&times;</a> 
</div> 


<!-- The Second Modal --> 

<div id="secondModal" class="reveal-modal" data-reveal> 
<h2>Tada! Second Modal</h2> 
<p>Some text. .</p> 
<a class="close-reveal-modal">&times;</a> 

</div> 


| 


第 二 个 模 态 框 会 取代 第 一 个 模 态 框 。 如 果 你 希望 在 打开 第 二 个 模 态 框 时 ， 不 关闭 第 
一 个 模 态 框 。 可 以 在 第 二 个 模 态 框 上 添加 
data-options-"multiple opened:true;" 属性 : 





实例 


«div id-"secondModal" class="reveal-modal" data-reveal data-option: 
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Foundation Joyride 
Joyride 是 一 个 功能 向 导 的 JavaScript 效果 ， 创 建 实 例如 下 : 


实例 


«!-- Elements that control the tour stops --> 
«h3 id="first">First stop!</h3> 
«h3 id="second">Second stop!</h3> 


<!-- The joyride: must be placed at the bottom of your page, but ir 
<ol class="joyride-list" data-joyride> 
<li data-id="first"> 
<p>First stop. The ride has begun!</p> 
</li> 
<li data-id="second"> 
<h4>Second Stop</h4> 
<p>Any valid HTML will work inside the Joyride.</p> 
</li> 
<li data-button="End"> 
<h4>End Stop</h4> 
<p>The tour is over. You can either go back to the previous st« 
</li> 
«/ol» 


<!-- Start Joyride Upon Initialization --> 

<script> 

$(document).ready(function() { 
$(document).foundation('joyride', 'start'); 


}) 


</script> 


3d ud 5 


实例 解析 


以 上 实例 中 ， 我 们 创建 了 两 个 元 素 ， 每 个 元 素 都 有 独立 的 ID。 两 个 元 素 设置 了 
joyride 开始 和 结束 的 位 置 。 


我 们 在 &lt;ol&gt; 或 &lt;ul&gt; 元 素 上 添加 data-joyride 属性 和 
.joyride-list 类 来 创建 joyride。 你 需要 在 文档 头 部 定义 它 (在 

&lt;body&gt; 内 的 头 部 )。 在 每 个 列表 上 使 用 &lt;li&gt; 元 素 ， 每 个 元 素 添 
加 data-id-" value " 属性 。 属 性 的 value 必须 与 之 前 元 素 的 id 相同 。 所 以 第 
一 个 功能 导航 &lt;h3&gt; 元素 使 用 id-"first" 必须 与 «li» 元 素 的 data-id-"first" 
值 一 致 。 


如 果 你 没有 管理 停止 的 id， 将 显示 一 个 模 态 框 。 





最 后 ，Jovride 需要 使 用 JavaScript 初始 化 它 ， 代 码 为 : 
$(document).foundation('joyride', 'start'); 


Foundation 均衡 磊 (Equalizem) 


我 们 可 以 在 容器 元 素 添 加 data-equalizer 属性 ， 并 为 每 个 子 元 素 添 加 
data-equalizer-watch 属性 来 创建 一 个 相同 高 度 的 均衡 器 。 最 高 的 元 素 决 定 了 
其 他 元 素 的 高 度 。 


注意 : 滑 块 需要 使 用 JavaScript。 所 以 你 需要 初始 化 oundation JS: 
实例 
头 


«div class-"row" data-equalizer> 
«div class="medium-4 columns panel" data-equalizer-watch> 
Lorem ipsum... 
«/div» 
«div class="medium-4 columns panel" data-equalizer-watch> 
Sed ut... 
«/div» 
«div class-"medium-4 columns panel" data-equalizer-watch» 
Lorem ipsum... 
«/div» 
«/div» 


«!-- Initialize Foundation JS --> 

«script» 

$(document).ready(function() { 
$(document).foundation(); 


}) 


</script> 


不 同 屏幕 的 均衡 器 


在 均衡 器 上 通过 添加 data-equalizer-mq-" value " 属性 为 不 同 屏幕 尺寸 设置 
相同 高 度 。 值 可 以 是 以 下 之 一 : 


值 描述 实例 
medium-up 默认 。 创建 相同 高 度 的 容器 ， 宽 度 大 于 40.063em 
large-up 创建 相同 高 度 的 容器 ， 宽 度 大 于 64.063em 
xlarge-up 创建 相同 高 度 的 容器 ， 宽 度 大 于 90.063em 
xxlarge-up 创建 相同 高 度 的 容器 ， 宽 度 大 于 120.063em 


RENE 


Jj data-equalizer 和 data-equalizer-watch 属性 添加 相同 的 值 。 这 会 一 
起 连接 到 均衡 器 容器 。 重复 多 次 柑 套 均衡 器 ， 确 保 他 们 是 匹配 的 : 


实例 


<!-- The Equalized Container --> 
<div class="row" data-equalizer="first"> 
<div class="medium-4 columns"> 
«div class="panel" data-equalizer-watch="first"> 
<h3>Panel</h3> 


<!-- An Equalized Container Inside The Equalized Container -- 
<div class="row" data-equalizer="second"> 
«div class="panel" data-equalizer -watch="second"> 
<h3>Nested Panel</h3> 
<p>Lorem ipsum...</p> 
</div> 
«div class="panel" data-equalizer -watch="second"> 
<h3>Nested Panel</h3> 
<p>Lorem ipsum. ..</p> 
</div> 
«div class="panel" data-equalizer -watch="second"> 
<h3>Nested Panel</h3> 
<p>Lorem ipsum. ..</p> 
</div> 
</div> 
<!-- End Nested Equalized Container --> 


</div> 
</div> 
<div class="medium-4 columns"> 
«div class="panel" data-equalizer-watch="first"> 


<h3>Panel</h3> 
<p>Ut enim. ..</p> 
</div> 
</div> 


<div class="medium-4 columns"> 
«div class="panel" data-equalizer-watch="first"> 
<h3>Panel</h3> 
<p>Lorem ipsum....</p> 
</div> 
</div> 
</div> 
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Foundation 网 格 


Foundation 网 格 系统 


Foundation 网 格 系统 为 12 列 。 
如 果 你 不 需要 12 列 ， 你 可 以 合并 一 些 列 ， 创 建 一 些 更 大 宽度 的 列 。 


span span span span span span span span span span span span 
1 1 il 1 1 al 1 al i i il i 


span 4 span 4 span 4 
span 4 span 8 
span 6 span 6 
span 12 


Foundation 的 网 格 系统 是 响应 式 的 。 列 会 根据 屏幕 尺寸 自动 调整 大 小 。 在 大 尺寸 
屏幕 上 ， 可 能 是 三 列 ， 小 屏幕 尺寸 就 可 能 是 三 个 单列 ， 按 顺序 排列 。 


网 格 列 


Foundation 网 格 系统 有 三 个 列 : 


e .small (手机 端 ) 
e „medium (平板 设备 ) 
e large (电脑 设备 : Ei, AAH) 


以 上 类 可 以 结合 使 用 ， 创 建 更 灵活 的 布局 
基本 的 网 格 结构 
以 下 是 基本 的 Foundation 网 格 结构 实例 : 


实例 


«div class="row"> 
«div class-"small|medium|large- num columns"></div> 
«/div» 
«div class="row"> 
«div class-"small|medium|large- num columns"></div> 
«div class-"small|medium|large- num columns"></div> 
«div class-"small|medium|large- num columns"></div> 
«/div» 
«div class="row"> 


«/div» 


首先 ， 创 建 一 行 (&lt;div class-"row"&gt; ), 这 是 一 个 水 平 的 垂直 列 。 然 后 
添加 列 的 数量 说 明 small- num , medium- num 及 large- num X, ik 
x : 列 的 数量 num ”加 起 来 必须 等 于 12 : 


实例 


«div class="row"> 
«div class="small-12 columns">.small-12 yellow</div> 
</div> 
<div class="row"> 
<div class-"small-8 columns">.small-8 beige</div> 
<div class="small-4 columns">.small-4 gray</div> 
</div> 
<div class="row"> 
<div class="large-9 small-8 columns">.small-8 .large-9 pink</div: 
<div class="large-3 small-4 columns">.small-4 .large-3 orange</d: 
</div> 





实例 中 ， 第 一 行 的 <div> X Xj .small-12 , 这 会 创建 12 列 (100% 宽 度 ) 。 


第 二 行 创建 了 两 个 列 ， .smal1-4 的 宽度 为 33.3% ， .small-8 的 宽度 为 
66.696, 


第 三 行 我 们 添加 了 领 外 的 两 个 列 ( .Large-3 和 .large-9 )。 这 意味 着 如 果 在 大 
屏幕 尺寸 下 ， 列 就 会 变 为 25% ( .large-3 ) #1 75%( .large-9 ) 的 比例 。 同 时 我 
们 也 指定 了 小 屏幕 上 列 的 比例 3396 ( .small-4 ) 和 66% ( .small-8 )。 这 种 组 

合 的 方式 对 于 不 同 屏幕 显示 效果 是 非常 有 帮助 的 。 


网 格 选项 


下 表 总 结 了 Foundation 网 格 系统 在 多 个 设备 上 的 说 明 : 


小 型 设备 中 等 设备 大 设备 


Phones Tablets 
(<40.0625em (>=40.0625em ells A 
(640px)) (640px)) ` 
网 
格 — Sk Daa, Hr LA AAA, MAMAE 
行 Be KTR 以 上 是 水 平 的 平 的 
为 
前 .small-* .medium-* large-* 
BR 
的 
数 12 12 12 
量 
可 
内 Yes Yes Yes 
BR 
F 
移 Yes Yes Yes 
量 
列 
排 Yes Yes Yes 
序 


eR 
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网 格 最 大 ( .row ) 宽度 为 62.5rem。 在 宽屏 上 ， 当 宽度 大 于 62.5rem, 列 不 会 跨越 
页 面 的 宽度 ， 即使 宽度 设 定 为 100%。 但 你 可 以 通过 CSS 重新 设置 max-width: 


实例 


<style> 
.row { 
max-width: 10096; 


j 
</style> 


如 果 你 使 用 默认 的 max-width, 但 希望 背景 颜色 跨越 整个 页 面 宽 度 ， 你 可 以 使 用 
,row 包 右 整个 容器 ， 并 指定 你 需要 的 背景 颜色 : 


实例 


«div style="background-color:coral;padding:25px;"> 
«div class="row"> 
«div class-"small-6 columns" style-"background-color:yellow;'» 
«div class-"small-6 columns" style="background-color:pink;">.sr 
«/div» 
«/div» 
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Foundation 网 格 - ZK3E3ÉE & 


以 下 实例 创建 了 一 个 基本 的 网 格 系统 ， 在 PC 和 平板 设备 上 它 是 水 平平 铺 的 ， 在 手 
机 等 小 型 设备 上 它 是 水 平 堆 过 的。 


实例 


«div class="row"> 
«div class="medium-6 columns" style-"background-color:yellow;"» 


«p»3& $ A fe «/p» 
«/div» 
«div class="medium-6 columns" style="background-color:pink;"> 
«p»3& $ A fe«/p» 
«/div» 
«/div» 


ES 了 9 
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提示 : .small&£i24;medium&£i24;large-* 类 中 的 数字 指定 了 跨越 的 列 数 。 
所 以 ， .small-1 跨越 1 列 ，.small-4 跨越 4 列 ，.smal1-6 跨越 6 列 
(50% 宽度 ) 等 。 


注意 : 要 保证 数列 加 起 来 是 12 列 ! 


Foundation 网 格 - 小 型 设备 


假设 我 们 在 小 型 设备 上 有 一 个 简单 的 网 格 布局 ， 两 列 ， 宽 度 比例 为 25% 和 75%。 
提示 : 小 型 设备 的 定义 是 屏幕 小 于 40.0625em o 
小 型 设备 上 我 们 使 用 .small-* X. 


«div class-"small-3 columns">....</div> 
«div class-"small-9 columns">....</div> 


以 下 实例 设置 了 两 个 列 ， 比 例 为 25% 和 75% (Foundation 是 移动 优先 : 如 果 没 有 特 
别 说 明 ， 在 大 型 设备 上 会 继承 small 类 的 代码 ): .small in them and use those". 


实例 


«div class="row"> 
«div class-"small-3 columns" style-"background-color:yellow;"» 


«p»3& & dfe «/ p» 
«/div» 
«div class-"small-9 columns" style="background-color:pink;"> 
«p»3& & fe «/ p» 
«/div» 
«/div» 


q 


注意 : 要 保证 数列 加 起 来 是 12 列 ! 
如 果 需 要 设置 33.3%/66.6% 的 比例 ， 你 可 以 使 用 .small-4 和 .small-8 : 


实例 


<div class="row"> 
<div class="small-4 columns" style="background-color:yellow;"> 
<p> 菜 乌 教 程 </p> 
</div> 
<div class="small-8 columns" style="background-color:pink;"> 
<p> 菜 乌 教 程 </p> 
</div> 
</div> 


Foundation 网 格 - 中 型 设备 


上 一 章节 我 们 介绍 了 小 型 设备 上 我 们 使 用 .small-* 类 来 设置 ， 网 格 比例 为 
25%/75% : 


«div class-"small-3 columns">....</div> 
«div class-"small-9 columns">....</div> 


在 中 型 设备 上 我 们 推荐 的 比例 为 50%/50%。 

提示 : 中 型 设备 的 屏幕 尺寸 定义 在 40.0625em 到 64.0624em 之 间 。 
中 型 设备 上 使 用 .medium-* 类 。 

现在 我 们 在 中 型 设备 上 添加 两 列 : 


«div class-"small-3 medium-6 columns">....</div> 
«div class-"small-9 medium-6 columns">....</div> 


以 上 实例 设置 了 两 个 列 ， 比 例 为 25% 和 7596 (Foundation 是 移动 优先 : 如 果 没 有 特 
别 说 明 ， 在 大 型 设备 上 会 继承 small 类 的 代码 ): 


小 型 设备 上 使 用 的 比例 为 25%/75% ( .small-3 和 .small-9 )。 但 在 中 型 设备 
上 使 用 的 比例 为 50%/50% ( .medium-6 和 .medium-6 ) 。 


实例 


«div class="row"> 
«div class-"small-3 medium-6 columns" style-"background-color:ye: 


«p»3& & dfe «/ p» 
«/div» 
«div class-"small-9 medium-6 columns" style="background-color: pir 
«p»3& & dfe «/ p» 
«/div» 
«/div» 





注意 : 要 保证 数列 加 起 来 是 12 7l! 


紧 在 中 型 设备 上 使 用 


以 下 实例 中 我 们 指定 了 .medium-6 X (不 是 .small-* )。 这 表明 在 中 型 或 大 型 
设备 上 上 比例 为 50%/50%。 但 在 小 型 设备 上 会 水 平 堆 过 (100% 宽度 ): 


实例 


«div class="row"> 
«div class="medium-6 columns" style="background-color:yellow; "> 


<p> 菜 乌 教 程 </p> 
</div> 
<div class="medium-6 columns" style="background-color:pink;"> 
<p> 菜 乌 教 程 </p> 
</div> 
</div> 
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Foundation 网 格 - 大 型 设备 


上 一 章节 我 们 介绍 了 中 型 设备 和 小 型 设备 的 网 格 布局 ， 小 型 设备 上 使 用 的 比例 为 
2596/7596 (.small-3 和 .small-9)， 但 在 中 型 设备 上 使 用 的 比例 为 5096/5096 
(.medium-6 和 .medium-6) : 


«div class-"small-3 medium-6 columns">....</div> 
«div class-"small-9 medium-6 columns">....</div> 


在 大 型 设备 上 我 们 推荐 的 比例 为 3396/6696. 
fem: 大 型 设备 的 屏幕 尺寸 定义 大 于 64.0625em。 
大 型 设备 上 使 用 .large-* 类 。 

现在 我 们 在 大 型 设备 上 添加 两 列 : 


«div class="small-3 medium-6 large-4 columns">....</div> 
«div class="small-9 medium-6 large-8 columns">....</div> 
解析 


e 小 型 设备 两 个 列 的 比例 为 25%/75% ( .small-3 和 .small-9 ) 
e 中 型 设备 两 个 列 的 比例 为 50%/50% ( .medium-6 和 .medium-6 ) 
e 大 型 设备 两 个 列 的 比例 为 33%/66% ( .large-4 和 .large-8 ) 


实例 


«div class="row"> 
<div class="small-3 medium-6 large-4 columns" style-z"background-« 


«p»3& & dfe «/ p» 
«/div» 
«div class-"small-9 medium-6 large-8 columns" style-"background-« 
«p»3& & dfe «/ p» 
«/div» 
«/div» 
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注意 : 要 保证 数列 加 起 来 是 12 列 ! 


紧 在 大 型 设备 上 使 用 


以 下 实例 中 我 们 指定 了 .large-6 类 (不 是 .medium- 和 `.smal/-*)。 这 表明 在 大 
型 设备 上 比例 为 50%/50%。 但 在 中 型 或 小 型 设备 上 会 水 平 堆 和 过 (100% 宽度 ): 


实例 


«div class="row"> 
«div class="large-6 columns" style-"background-color:yellow;"» 
«p»3& & Ae «/ p» 
«/div» 
«div class="large-6 columns" style-"background-color:pink;"» 
<p> 菜 乌 教 程 </p> 
</div> 
</div> 


Foundation 块 状 网 格 


: 例如 一 行内 要 显示 四 张 图 片 ， 不 管 什 么 屏幕 下 都 需 
均 分 宽度 。 


可 以 使 用 &lt;ul&gt; 元 素 加 上 .small|medium|large-block-grid- num. 
类 来 创建 块 状 网 格 。num 用 于 指定 均 分 是 数量 : 


实例 


«ul class="small-block-grid-3"> 
<li><img src="newyork.jpg" alt="New York"></1i> 
<li><img src="paris.jpg" alt="Paris"></li> 
<li><img src-'"sanfran.jpg" alt="San Francisco"></1li> 
</ul> 


另 一 个 实例 ， 使 用 段落 : 
实例 


«ul class="small-block-grid-3"> 
<li><p>Just a Simple Example Text...</p></1li> 
<li><p>Just a Simple Example Text...</p></1li> 
<li><p>Just a Simple Example Text...</p></1li> 
</ul> 


不 同 尺 寸 屏幕 显示 不 同 效 量 
通过 添加 多 个 网 格 块 类 可 以 设置 不 同 尺寸 屏幕 显示 不 同 的 块 数量 


实例 


«ul class-"small-block-grid-2 medium-block-grid-3 large-block-grid: 
<li><img src="newyork.jpg" alt="New York"></1i> 
<li><img src="paris.jpg" alt="Paris"></1li> 
<li><img src-'"sanfran.jpg" alt="San Francisco"></1li> 
<li><img src="newyork.jpg" alt="New York"></1i> 
</ul> 
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Foundation 网 格 实例 


以 下 我 们 收集 了 一 些 网 格 常用 的 实例 。 


三 个 均等 列 


该 实例 演示 了 如 何 创建 三 个 均等 列 (33.3%/33.3%/33.3%) ， 在 中 型 和 大 型 设备 上 显 
示 三 个 列 ， 在 小 型 设备 上 自动 堆 壹 : 


实例 


«div class="row"> 
«div class="medium-4 columns" style-"background-color:yellow;"» 
<p>.medium-4</p> 
</div> 
<div class="medium-4 columns" style="background-color:pink;"> 
<p>.medium-4</p> 
</div> 
«div class="medium-4 columns" style="background-color: yellow; "> 
<p>.medium-4</p> 
</div> 
</div> 


EE 


三 个 不 均等 列 


该 实例 演示 了 如 何 创 建 三 个 不 均等 列 (25%/50%/25%)， 在 中 型 和 大 型 设备 上 显示 
三 个 列 ， 在 小 型 设备 上 自动 堆 可 : 


实例 


«div class="row"> 
«div class="medium-3 columns" style="background-color:yellow; "> 
<p>.medium-3</p> 
</div> 
<div class="medium-6 columns" style="background-color:pink;"> 
<p>.medium-6</p> 
</div> 
«div class="medium-3 columns" style="background-color:yellow; "> 
<p>.medium-3</p> 
</div> 
</div> 
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两 个 均等 列 


该 实例 演示 了 如 何 创 建 两 个 均等 列 (50%/50%)， 在 小 型 、 中 型 和 大 型 设备 上 列 的 比 
例 始终 为 5096/5096 : 





实例 


«div class="row"> 
«div class="small-6 columns" style-"background-color:yellow;"» 
<p>.small-6</p> 
</div> 
«div class="small-6 columns" style="background-color:pink;"> 
<p>.small-6</p> 
</div> 
</div> 


两 个 不 均等 列 


该 实例 演示 了 如 何 创建 两 个 不 均等 列 (33.3%/66.6%)， 在 小 型 、 中 型 和 大 型 设备 上 
列 的 比例 始终 为 33.3%/66.6% : 


实例 


«div class="row"> 


«div class="small-8 columns" style-"background-color:yellow;"» 
<p>.small-8</p> 
</div> 


<div class="small-4 columns" style="background-color: pink; "> 
<p>.small-4</p> 
</div> 
</div> 


修改 列 的 顺序 


通过 使 用 .small|medium|large-push-* 和 .small|medium|large-pull-* 
类 来 修改 列 的 顺序 : 


实例 


«div class="row"> 


«div class-"small-4 small-8-push columns" style-"background-colo: 
<p>.small-4 .small-8-push</p> 
</div> 


«div class-"small-8 small-4-pull columns" style="background-colo} 
«p».small-8 .small-4-pull</p> 
«/div» 
«/div» 


DK 
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RA ELSE FISH (FU HHH AB): 


实例 





«div class="row"> 
«div class="small-8 columns"».small-8 
«div class="row"> 
«div class="small-8 columns"».small-8 Nested 
«div class="row"> 
<div class="small-8 columns">.small-8 Nested Again</div> 
«div class="small-4 columns"».small-4«/div» 


«/div» 
«/div» 
«div class="small-4 columns"».small-4«/div» 
«/div» 
«/div» 
«div class="small-4 columns"».small-4«/div» 


«/div» 
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混合 : FA SHES 

Foundation 网 格 系统 有 三 个 列 : .small-* (手机 )，.medium-* (平板 ), 和 
.large-* (桌面 设备 )。 这 些 类 可 以 动态 组 合 使 用 ， 让 布局 更 加 灵活 : 

提示 : 每 个 类 都 能 放大 ， 如 果 你 希望 小 型 和 大 型 屏幕 设备 的 宽度 一 样 可 以 设置 指定 


.small-* , 





实例 


«div class="row"> 
«div class="small-6 large-8 columns">.small-6 .large-8</div> 
<div class="small-6 large-4 columns">.small-6 .large-4</div> 
</div> 
<div class="row"> 
<div class="small-2 large-4 columns">.small-2 .large-2</div> 
<div class="small-4 large-4 columns">.small-4 .large-2</div> 
<div class="small-6 large-4 columns">.small-6 .large-2</div> 
</div> 
<div class="row"> 
<div class="small-3 large-5 columns">.small-3 .large-5</div> 
<div class="small-9 large-7 columns">.small-9 .large-7</div> 
</div> 


混合 : 手机 、 平 板 和 桌面 设备 


实例 


«div class="row"> 
<div class="medium-6 large-8 columns">.medium-6 .large-8«/div» 
<div class="medium-6 large-4 columns">.medium-6 .large-4</div> 
</div> 
<div class="row"> 
<div class="small-4 medium-3 large-7 columns">.small-4 .medium-3 
<div class="small-4 medium-6 large-3 columns">.small-4 .medium-6 
«div class-"small-4 medium-3 large-2 columns">.small-4 .medium-3 
«/div» 
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居中 列 


列 居 中 可 以 使 用 .small-centered 类 。 中 型 和 大 型 设 各 可 以 继承 小 型 设 各 的 居 
中 ， 但 你 需要 在 大 型 设备 上 设置 居中 类 .large-centered 。 








实例 


«div class="row"> 

«div class="small-4 small-centered columns">small-4 small-centere 
</div> 
<div class="row"> 

«div class="small-6 small-centered columns">small-6 small-centere 
</div> 
<div class="row"> 

<div class="small-6 large-centered columns">small-6 large-centere 
</div> 
<div class="row"> 

<div class="small-8 small-centered large-uncentered columns">sma- 
</div> 
<div class="row"> 

«div class="small-10 small-centered columns">small-10 small-cente 
</div> 





列 偏 移 量 


可 以 使 用 .large-offset-* (或 .small-offset-* ) 类 设置 列 向 右 移 。 左 侧 外 
边 距 的 列 数量 使 用 * 号 控制 |: 


实例 


«div class="row"> 

«div class="large-1 columns">1</div> 

<div class="large-11 columns">11</div> 
</div> 
<div class="row"> 

<div class="large-1 columns">1</div> 

<div class="large-10 large-offset-1 columns">10, offset 1</div> 
</div> 
<div class="row"> 

<div class="large-1 columns">1</div> 

<div class="large-9 large-offset-2 columns">9, offset 2</div> 
</div> 
<div class="row"> 

<div class="large-1 columns">1</div> 

<div class="large-8 large-offset-3 columns">8, offset 3</div> 
</div> 
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不 完整 列 


如 果 一 行 中 的 列 数量 之 和 不 是 12, Foundation 将 自动 将 最 后 一 列 向 右 浮动 ， 并 使 
用 空白 来 填充 剩 下 的 列 。 


可 选项 .end 类 用 于 设置 最 后 一 列 的 元 素 向 左边 浮动 : 
实例 
头 


«div class="row"> 
«div class="medium-3 columns">.medium-3</div> 
<div class="medium-3 columns">.medium-3</div> 
<div class="medium-3 columns">.medium-3</div> 
</div> 
«div class="row"> 
<div class="medium-3 columns">.medium-3</div> 
<div class="medium-3 columns">.medium-3</div> 
<div class="medium-3 columns end">.medium-3 .end</div> 
</div> 


宽屏 
网 格 ( .row ) RAR (max-width) 为 62.5rem。 在 宽屏 设备 上 尺寸 可 能 大 于 


62.5rem, 这 样 列 就 无 法 完整 填充 页 面 ， 即 便 宽度 设置 为 100%。 但 是 我 们 可 以 通过 
CSS 来 设置 新 的 max-width: 


实例 


«style» 
.row { 
max-width: 10096; 


</style> 


如 果 你 想 使 用 默认 的 max-width, 但 是 背景 颜色 需要 跨 域 整个 页 面 ， 这 时 你 在 容器 元 
素 上 使 用 .row 类 ， 并 指定 你 需要 的 背景 颜色 : 


实例 


«div style-"background-color:coral;padding:25px;"» 
«div class="row"> 
«div class-"small-6 columns" style-"background-color:yellow;'» 


«div class-"small-6 columns" style="background-color:pink;">.sr 
«/div» 


«/div» 
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Foundation 参考 手册 


Foundation 图 标 参 考 手册 


Foundation 图 标 
Foundation 提供 了 283 图 标 ， 你 可 以 使 用 CSS 来 泻 染 她 们 : 修改 大 小 和 颜色 。 


图 标 创 建 语 法 格式 如 下 : 


«i class="fi-name"></i> 


语法 中 name 部 分 为 图 标 指 定 的 名 称 。 

要 使 用 图 标 ， 你 可 以 将 图 片 的 样式 文件 放置 在 页 面 头 部 &lt;head&gt; 部分: 
«link rel="stylesheet" href="http://static.runoob.com/assets/four 

IE 

以 上 是 菜 乌 教程 使 用 的 图 标 样 式 类 ， 大 家 可 以 共用 。 

点 我 在 新 页 面 中 查看 图 标 。 





General Icons 


heart 
star 

plus 
minus 

X 

check 
upload 
download 
widget 
marker 
refresh 
home 
trash 
paperclip 
lock 
unlock 
calendar 
cloud 
magnifying-glass 


zoom-out 
zoom-in 
wrench 

rss 

share 

flag 
list-thumbnails 
list 
thumbnails 
annotate 
folder 
folder-lock 
folder-add 
clock 
play-video 
crop 
archive 
pencil 
graph-trend 
graph-bar 
graph-horizontal 
graph-pie 
checkbox 
minus-circle 
x-circle 

eye 
database 
results 


results-demographics 


like 

dislike 
upload-cloud 
camera 

alert 

bookmark 
contrast 

mail 

video 

telephone 
comment 
comment-video 
comment-quotes 
comment-minus 
comments 
microphone 
megaphone 
sound 
address-book 


bluetooth 
html5 
css3 
layout 
web 
foundation 


Page Icons 


page 
page-csv 
page-doc 
page-pdf 
page-export 
page-export-csv 
page-export-doc 
page-export-pdf 
page-add 
page-remove 
page-delete 
page-edit 
page-search 
page-copy 
page-filled 
page-multiple 


Arrow Icons 


arrow-up 
arrow-right 
arrow-down 
arrow-left 
arrows-out 
arrows-in 
arrows-expand 
arrows-compress 


People Icons 


torso 

torso-female 

torsos 
torsos-female-male 
torsos-male-female 
torsos-all 


e torsos-all-female 
e torso-business 


Device Icons 


monitor 

laptop 
tablet-portrait 
tablet-landscape 
mobile 
mobile-signal 
usb 


Text Editor Icons 


bold 

italic 
underline 
strike 
text-color 
background-color 
superscript 
subscript 
align-left 
align-center 
align-right 
align-justify 
list-numbered 
list-bullet 
indent-more 
indent-less 
print 

save 

photo 

filter 
paint-bucket 
link 

unlink 

quote 


Media Control Icons 


e play 
e Stop 
e pause 


previous 
rewind 
fast-forward 
next 

record 
play-circle 
volume-none 
volume 
volume-strike 
loop 

shuffle 

eject 
rewind-ten 


Ecommerce Icons 


dollar 

euro 

pound 

yen 

bitcoin 
bitcoin-circle 
credit-card 
shopping-cart 
burst 
burst-new 
burst-sale 
paypal 
price-tag 
pricetag-multiple 
shopping-bag 
dollar-bill 


Accessibility Icons 


wheelchair 
braille 
closed-caption 
blind 

asl 

hearing-aid 
guide-dog 
universal-access 
telephone-accessible 
elevator 

male 


female 
male-female 
male-symbol 
female-symbol 


Social & Brand Icons 


social-500px 
social-adobe 
social-amazon 
social-android 
social-apple 
social-behance 
social-bing 
social-blogger 
social-delicious 
social-designer-news 
social-deviant-art 
social-digg 
social-dribbble 
social-drive 
social-dropbox 
social-evernote 
social-facebook 
social-flickr 
social-forrst 
social-foursquare 
social-game-center 
social-github 
social-google-plus 
social-hacker-news 
social-hi5 
social-instagram 
social-joomla 
social-lastfm 
social-linkedin 
social-medium 
social-myspace 
social-orkut 
social-path 
social-picasa 
social-pinterest 
social-rdio 
social-reddit 
social-skype 
social-skillshare 
social-smashing-mag 


social-snapchat 
social-spotify 
social-squidoo 
social-stack-overflow 
social-steam 
social-stumbleupon 
social-treehouse 
social-tumblr 
social-twitter 
social-vimeo 
social-windows 
social-xbox 
social-yahoo 
social-yelp 
social-youtube 
social-zerply 
social-zurb 


Miscellaneous Icons 


compass 
music 

lightbulb 
battery-full 
battery-half 
battery-empty 
projection-screen 
info 

power 

asterisk 

at-sign 

key 

ticket 

book 
book-bookmark 
anchor 

puzzle 

foot 

paw 

mountains 
trees 
sheriff-badge 
first-aid 

trophy 
prohibited 
no-dogs 
no-smoking 


safety-cone 
shield 

crown 

target 
target-two 
die-one 

die-two 
die-three 
die-four 
die-five 

die-six 

skull 

map 

clipboard 
clipboard-pencil 
clipboard-notes 


Foundation CSS 参考 手册 


Foundation 默认 设置 


Foundation 使 用 浏览 器 默认 字体 大 小 ( font-size:100% )。 对 于 大 多 数 桌 面 设 各 
的 浏览 器 来 说 ， 字 体 大 小 默认 为 16px。 对 于 移动 设备 的 浏览 器 ， 字 体 默 认 大 小 为 
12px, 默认 的 字体 为 "Helvetica Neue" , line-height 默认 为 1.5 。 


这 些 设置 是 适用 于 &1t;body&gt; 元 素 内 的 元 素 。 


此 外 ，  &lt;p&gt; 元 素 与 底部 的 外 边 距 (margin-bottom) 为 1.25rem , line-height 
为 1.6。 


文本 


以 下 的 HTML 元 素 ，Foundation 设置 了 独立 的 样式 演 染 它 ， 不 会 采用 浏览 器 默认 
样式 。 点 击 "尝试 一 下 " 查看 在 线 实 例 。 


A 描述 
<h1> - <h6> h1 - h6 标题 
«a» 浅 蓝 色 的 链接 ， 妃 标 移动 到 链接 会 有 下 划 线 
<small> 浅 厌 色 的 副标题 文本 
«blockquote» ”引用 内 容 模 块 
<strong> 加 粗 文本 
<em> 斜体 
OE 指定 单词 的 缩写 ， 使 用 该 元 素 文本 出 现 虚 线 下 划 线 ， 
鼠标 移动 上 去 会 有 提示 信息 
<kbd> 接收 键盘 输入 指令 : <kbd>CTRL + P</kbd> 
<hr> 水 平 线 
«code» 代码 片段 
«ul» 无 序列 表 
«ol» 有 序列 表 


«dl» 描述 性 列表 


文本 对 齐 


使 用 CSS 类 来 修改 文本 的 对 齐 方 式 : 


.small-only-text-left 


.medium-text-left 
.medium-only-text-left 
.large-text-left 
.large-only-text-left 
.xlarge-text-left 
.xlarge-only-text-left 


.xxlarge-text-left 
右 对 齐 
.Small-text-right 
.small-only-text-right 
.medium-text-right 


.medium-only-text- 


类 描述 实例 
.text-left 左 对 齐 文本 
text-right 右 对 齐 文本 
.text-center 居中 
.text-justify 两 端 对 齐 
不 同 尺寸 屏幕 的 对 齐 
使 用 CSS 类 来 修改 文本 的 不 同 尺寸 屏幕 的 对 齐 方式 : 
x 描述 " 
左 对 齐 
.small-text-left 所 有 尺寸 屏幕 左 对 齐 


小 尺寸 屏幕 左 对 齐 ( 宽 度 小 于 40em ) 
EAF 40.0625em 尺寸 屏幕 左 对 齐 
度 在 40.0625em 到 64em 尺寸 的 屏幕 左 对 


大 于 64.0625em 尺寸 屏幕 左 对 齐 
在 64.0625em 到 90em 尺寸 的 屏幕 左 对 


MuR Gm 
kd 


M 


EAF 90.0625em 尺寸 屏幕 左 对 章 
在 90.0625em 到 120em 尺寸 的 屏幕 左 对 


M M SF 
Kd 


M 


el 


EAF 120em 尺寸 屏幕 左 对 章 


所 有 尺寸 屏幕 右 对 齐 

小 尺寸 屏幕 右 对 齐 ( 宽 度 小 于 40em ) 

宽度 大 于 40.0625em 尺寸 屏幕 右 对 齐 
宽度 在 40.0625em 到 64em 尺寸 的 屏幕 右 对 


right 
.large-text-right 


.large-only-text-right 
.xlarge-text-right 
.xlarge-only-text-right 


.xxlarge-text-right 

居中 对 齐 
.Small-text-center 
.small-only-text-center 
.medium-text-center 


.medium-only-text- 
center 


.large-text-center 
.large-only-text-center 


.xlarge-text-center 


.xlarge-only-text- 
center 


.xxlarge-text-center 
两 端 对 齐 
.small-text-justify 
.small-only-text-justify 
.medium-text-justify 


.medium-only-text- 
justify 


Jarge-text-justify 
.large-only-text-justify 


.xlarge-text-justify 


.xlarge-only-text- 
justify 


=H 


EAF 64.0625em RU RRA xt A 
在 64.0625em 到 90em 尺寸 的 屏幕 右 对 


mg c 
ku 


kd 


大 于 90.0625em 尺寸 屏幕 右 对 齐 
在 90.0625em 到 120em 尺寸 的 屏幕 右 对 


we SF 
kd 


M 


EAF 120em 尺寸 屏幕 右 对 齐 


el 


所 有 尺寸 屏幕 居中 对 齐 

小 尺寸 屏幕 居中 对 齐 (宽度 小 于 40em ) 
EAF 40.0625em 尺寸 屏幕 居中 对 齐 
度 在 40.0625em 到 64em 尺寸 的 屏幕 居中 


4a c 


=H 


kd 


大 于 64.0625em 尺寸 屏幕 居中 对 齐 
在 64.0625em 到 90em 尺寸 的 屏幕 居中 


4a c 
XW xg 


M 


kd 


AF 90.0625em 尺寸 屏幕 居中 对 齐 
在 90.0625em 到 120em 尺寸 的 屏幕 居中 


Aa c 
XW xg 


M 


Ex 
kd 


大 于 120em 尺寸 屏幕 居中 对 齐 


所 有 尺寸 屏幕 都 两 端 对 齐 
小 尺寸 屏幕 两 端 对 齐 (宽度 小 于 40em ) 


宽度 大 于 40.0625em 尺寸 屏幕 两 端 对 齐 
宽度 在 40.0625em 到 64em 尺寸 的 屏幕 两 端 
Xt FF 

宽度 大 于 64.0625em 尺寸 屏幕 两 端 对 齐 
宽度 在 64.0625em 到 90em 尺寸 的 屏幕 两 端 
xt FF 

宽度 大 于 90.0625em 尺寸 屏幕 两 端 对 齐 
宽度 在 90.0625em 到 120em 尺寸 的 屏幕 两 端 
对 齐 


.xxlarge-text-justify 宽度 大 于 120em 尺寸 屏幕 两 端 对 齐 


其 他 


类 描述 实例 
.left 元 素 向 左 浮动 
right 元 素 向 右 浮 动 
.Clearfix 清除 浮动 - 必须 添加 在 浮动 元 素 的 父 元 素 上 
.hide 隐藏 元 素 (CSS display: none ) 
.list-inline 将 所 有 元 素 设置 在 同一 行 
lead 让 <p> 元 素 更 突出 


.subheader 设置 浅 色 的 <h1> - <h6> 元 素 


Foundation CSS 可 见 性 


根据 屏幕 尺寸 显示 元 素 
以 下 类 会 根据 设备 (屏幕 尺寸 ) 来 显示 元 素 。 


Æ 
KR 


.show-for-small- 
only 


.show-for- 
medium-up 


.Show-for- 
medium-only 


.Show-for-large- 
UP 
.Show-for-large- 
only 


.Show-for- 
xlarge-up 


.Show-for- 
xlarge-only 


.show-for- 
xxlarge-up 


以 下 实例 演示 了 以 上 所 有 


学 


描 


只 在 小 型 设备 上 显示 元 素 (屏幕 宽度 小 于 40.0625em ) 


在 中 型 及 以 上 设备 上 显示 元 素 (屏幕 宽度 大 于 40.0625em) 


只 在 中 型 设备 上 显示 元 素 (屏幕 宽度 在 40.0625em 到 
64.0625em 之 间 ) 


在 大 型 及 以 上 设备 上 显示 元 素 (屏幕 宽度 大 于 64.0625em) 
只 在 大 型 设备 上 显示 元 素 (屏幕 宽度 在 64.0625em 到 
90.0625em 之 间 ) 


在 更 大 型 及 以 上 设备 上 显示 元 素 (屏幕 宽度 大 
90.0625em) 


只 在 更 大 型 及 以 上 设备 上 显示 元 素 (屏幕 宽度 在 90.0625em 
到 120.0625em 之 间 ) 


在 超大 型 及 以 上 设备 上 显示 元 素 (屏幕 宽度 大 于 
120.0625em) 


类 的 可 见 性 。 


. Show- 


<p class="show-for-small-only"> 你 在 小 型 设备 上 。</p> 

<p class="show-for-medium-up"> 你 在 中 型 、 大 型 、 更 大 型 超大 型 的 设备 上 。</p 
«p class="show-for-medium-only"> 你 在 中 型 设备 上 。</p> 

«p class="show-for-large-up"> 你 在 大 型 、 更 大 型 、 超 大 型 的 设备 上 </p> 

«p class="show-for-large-only"> 你 在 大 型 设备 上 。</p> 

<p class="show-for-xlarge-up"> 你 在 更 大 型 、 超 大 型 的 设备 上 。</p> 


«p class="show-for-xlarge-only"> 你 在 更 大 型 设 各 上 。</p> 
«p class="show-for-xxlarge-up"> 你 在 超大 型 设备 上 。</p> 





根据 屏幕 尺寸 隐藏 元 素 


以 下 类 会 根据 设备 (屏幕 尺寸 ) 来 隐藏 元 素 。 


.hide-for-small- 
only 

.hide-for- 
medium-up 


.hide-for- 
medium-only 
.hide-for-large- 
up 
.hide-for-large- 
only 

.hide-for- 
xlarge-up 
.hide-for- 
xlarge-only 


.hide-for- 
xxlarge-up 


学 


描 


只 在 小 型 设备 上 隐藏 元 素 (屏幕 宽度 小 于 40.0625em ) 


在 中 型 及 以 上 设 各 上 隐藏 元 素 (屏幕 宽度 大 于 40.0625em) 


只 在 中 型 设备 上 隐藏 元 素 (屏幕 宽度 在 40.0625em 到 
64.0625em 之 间 ) 


在 大 型 及 以 上 设备 上 隐藏 元 素 (屏幕 宽度 大 于 64.0625em) 


只 在 大 型 设备 上 隐藏 元 素 (屏幕 宽度 在 64.0625em 到 
90.0625em 之 间 ) 


在 更 大 型 及 以 上 设备 上 隐藏 元 素 (屏幕 宽度 大 于 90.0625em) 


只 在 更 大 型 及 以 上 设备 上 隐藏 元 素 (屏幕 宽度 在 90.0625em 
到 120.0625em 之 间 ) 


在 超大 型 及 以 上 设备 上 隐藏 元 素 (屏幕 宽度 大 于 
120.0625em) 


«p class="hide-for-small-only"> 你 不 在 小 型 设备 上 。</p> 

<p class="hide-for-medium-up"> 你 不 在 中 型 、 大 型 、 更 大 型、 超大 型 的 设备 上 。 <, 
«p class="hide-for-medium-only"> 你 不 在 中 型 设 各 上 。</p> 

<p class="hide-for-large-up"> 你 不 在 大 型 、 更 大 型 、 超 大 型 的 设备 上 。</p> 

«p class="hide-for-large-only"> 你 不 在 大 型 设备 上 。</p> 


<p class="hide-for-xlarge-up"> 你 不 在 更 大 型 、 超 大 型 的 设备 上 。</p> 
«p class="hide-for-xlarge-only"> 你 不 在 更 大 型 设 各 上 。</p> 
«p class="hide-for-xxlarge-up"> 你 不 在 超大 型 设备 上 。</p> 





根据 屏幕 方向 显示 元 冬 


以 下 类 会 根据 设 各 (屏幕 尺寸 ) 来 隐藏 元 素 。 


我 们 可 以 设置 元 素 在 不 同方 向 是 是 否 显示 或 隐藏 。 笔 记 本 等 桌面 设备 一 般 是 横向 
的 ， 但 是 手机 和 平板 设备 可 以 是 横向 或 纵向 ， 我 们 可 以 根据 用 户 手 机 拿 的 方向 来 设 
置 元 素 隐 藏 与 显示 : 


x 描述 


.Show-for-landscape 在 横向 时 显示 元 素 (纵向 隐藏 ) 
.show-for-portrait 在 纵向 时 显示 元 素 (横向 隐藏 ) 


下 面 实例 根据 使 用 的 方向 显示 文本 内 容 : 
实例 


«p class="show-for-landscape"> 文 本 只 在 横向 显示 。</p> 
«p class="show-for-portrait"> 文 本 只 在 纵向 显示 。</p> 


触 屏 设备 的 显示 和 与 隐藏 
你 可 以 根据 设备 是 否 支持 触摸 来 显示 与 隐藏 元 素 。 


类 描述 
.show-for-touch 在 支持 触 屏 的 设备 上 显示 (不 支持 的 设备 上 隐藏 ) 
.hide-for-touch 在 支持 触 屏 的 设备 上 隐藏 (不 支持 的 设备 上 显示 ) 


下 面 实例 根据 设备 是 否 支持 触摸 来 显示 文本 内 容 : 
实例 


«p class="show-for-touch"> 你 的 设 各 支持 触 屏 。</p> 
«p class="hide-for-touch"> 你 的 设 各 不 支持 触 屏 。</p> 


